FOUR-13480 | Implement Template Listing UI Under ‘My Templates’ Tab

ProcessMaker/Http/Controllers/Process/ScreenController.php

@@ -56,7 +56,21 @@ public function index(Request $request)
             'countCategories' => ScreenCategory::where(['status' => 'ACTIVE', 'is_system' => false])->count(),
         ];
 
-        return view('processes.screens.index', compact('listConfig', 'catConfig'));
+        $myScreenTemplates = (object) [
+
+        ];
+
+        $publicScreenTemplates = (object) [
+
+        ];
+
+        return view('processes.screens.index',
+            compact(
+                'listConfig',
+                'catConfig',
+                'myScreenTemplates',
+                'publicScreenTemplates',
+            ));
     }
 
     /**

resources/js/components/shared/EllipsisMenu.vue

@@ -25,6 +25,10 @@
     <template v-else-if="lauchpad" #button-content>
       <i class="fas fa-ellipsis-h ellipsis-menu-icon p-0" />
     </template>
+    <template v-else-if="screenTemplate" #button-content>
+      <i class="fas fa-eye ellipsis-menu-icon pr-2" />
+      <i class="fas fa-ellipsis-h ellipsis-menu-icon" />
+    </template>
     <template v-else #button-content>
       <i class="fas fa-ellipsis-h ellipsis-menu-icon" />
     </template>
@@ -110,7 +114,22 @@ export default {
   components: { PmqlInput },
   filters: { },
   mixins: [],
-  props: ["actions", "permission", "data", "isDocumenterInstalled", "divider", "lauchpad", "customButton", "showProgress", "isPackageInstalled", "searchBar", "variant", "redirectTo", "redirectId"],
+  props: [
+    "actions",
+    "permission",
+    "data",
+    "isDocumenterInstalled",
+    "divider",
+    "lauchpad",
+    "screenTemplate",
+    "customButton",
+    "showProgress",
+    "isPackageInstalled",
+    "searchBar",
+    "variant",
+    "redirectTo",
+    "redirectId",
+  ],
   data() {
     return {
       active: false,

resources/js/components/shared/ellipsisMenuActions.js

@@ -253,6 +253,31 @@ export default {
           permission: ["delete-decision_tables", "view-additional-asset-actions"]
         },
       ],
+      myTemplateActions: [
+        //TODO: Update My Template Ellipsis Menu Actions
+        {
+          value: "edit-template",
+          content: "Edit Template",
+          link: true,
+          href: "/designer/screen-builder/{{id}}/edit",
+          permission: ["edit-screens", "view-additional-asset-actions"],
+          icon: "fas fa-pen-square",
+        },
+        {
+          value: "make-public",
+          content: "Make Public",
+          link: true,
+          href: "/designer/screens/{{id}}/edit",
+          permission: ["edit-screens", "view-additional-asset-actions"],
+          icon: "fas fa-file-export",
+        },
+        {
+          value: "delete-template",
+          content: "Delete Template",
+          permission: ["delete-screens", "view-additional-asset-actions"],
+          icon: "fas fa-trash-alt",
+        },
+      ],
     };
   },
 };

resources/js/processes/screen-templates/components/MyTemplatesListing.vue

@@ -0,0 +1,230 @@
+<template>
+    <div class="data-table">
+      <data-loading
+              :for="/screens/"
+              v-show="shouldShowLoader"
+              :empty="$t('No Data Available')"
+              :empty-desc="$t('')"
+              empty-icon="noData"
+      />
+      <div v-show="!shouldShowLoader" class="card card-body my-templates-table-card" data-cy="my-templates-table">
+        <filter-table
+          :headers="fields"
+          :data="data"
+          table-name="my-screen-templates"
+          style="height: calc(100vh - 355px);"
+        >
+        <!-- Slot Table Header filter Button -->
+        <template
+          v-for="(column, index) in fields"
+          #[`filter-${column.field}`]
+        >
+          <div
+            v-if="column.sortable"
+            :key="index"
+            @click="handleEllipsisClick(column)"
+          >
+            <i
+              :class="['fas', {
+                'fa-sort': column.direction === 'none',
+                'fa-sort-up': column.direction === 'asc',
+                'fa-sort-down': column.direction === 'desc',
+              }]"
+            />
+          </div>
+        </template>
+        <!-- Slot Table Body -->
+        <template
+          v-for="(row, rowIndex) in data.data"
+          #[`row-${rowIndex}`]
+        >
+          <td
+            v-for="(header, colIndex) in fields"
+            :key="`${rowIndex}_${colIndex}`"
+            :data-cy="`my-templates-table-td-${rowIndex}-${colIndex}`"
+          >
+            <div
+              v-if="containsHTML(row[header.field])"
+              :data-cy="`my-templates-table-html-${rowIndex}-${colIndex}`"
+              v-html="sanitize(row[header.field])"
+            />
+            <template v-else>
+              <template
+                v-if="isComponent(row[header.field])"
+                :data-cy="`my-templates-table-component-${rowIndex}-${colIndex}`"
+              >
+                <component
+                  :is="row[header.field].component"
+                  v-bind="row[header.field].props"
+                />
+              </template>
+              <template
+                v-else
+                :data-cy="`my-templates-table-field-${rowIndex}-${colIndex}`"
+              >
+                <template v-if="header.field === 'name'">
+                  <b-tooltip
+                    v-if="header.truncate"
+                    :target="`element-${row.id}`"
+                    custom-class="pm-table-tooltip"
+                  >
+                    {{ row[header.field] }}
+                  </b-tooltip>
+                </template>
+                <template v-if="header.field === 'actions'">
+                  <ellipsis-menu
+                    class="my-template-table"
+                    :actions="myTemplateActions"
+                    :permission="permission"
+                    :data="row"
+                    :divider="true"
+                    :screen-template="true"
+                    @navigate="onMyTemplateNavigate"
+                  />
+                </template>
+                <template v-if="header.field !== 'name'">
+                  <div
+                    :style="{ maxWidth: header.width + 'px' }"
+                  >
+                    {{ getNestedPropertyValue(row, header) }}
+                  </div>
+                </template>
+              </template>
+            </template>
+          </td>
+        </template>
+      </filter-table>
+
+      <pagination-table
+        :meta="data.meta"
+        data-cy="my-templates-pagination"
+        @page-change="changePage"
+      />
+      <pagination
+        ref="pagination"
+        :single="$t('Template')"
+        :plural="$t('Templates')"
+        :per-page-select-enabled="true"
+        @changePerPage="changePerPage"
+        @vuetable-pagination:change-page="onPageChange"
+      />
+      </div>
+    </div>
+  </template>
+
+  <script>
+  import datatableMixin from "../../../components/common/mixins/datatable";
+  import dataLoadingMixin from "../../../components/common/mixins/apiDataLoading";
+  import ellipsisMenuMixin from "../../../components/shared/ellipsisMenuActions";
+  import screenNavigationMixin from "../../../components/shared/screenNavigation";
+  import EllipsisMenu from "../../../components/shared/EllipsisMenu.vue";
+  import FilterTableBodyMixin from "../../../components/shared/FilterTableBodyMixin";
+  import paginationTable from "../../../components/shared/PaginationTable.vue";
+
+  import { createUniqIdsMixin } from "vue-uniq-ids";
+  const uniqIdsMixin = createUniqIdsMixin();
+
+  export default {
+    components: { EllipsisMenu, paginationTable },
+    mixins: [datatableMixin, dataLoadingMixin, uniqIdsMixin, ellipsisMenuMixin, screenNavigationMixin, FilterTableBodyMixin],
+    props: ["filter", "id", "permission"],
+    data() {
+      return {
+        orderBy: "title",
+        screenId: null,
+        assetName: " ",
+        assignedProjects: [],
+        sortOrder: [
+          {
+            field: "title",
+            sortField: "title",
+            direction: "asc"
+          }
+        ],
+
+        fields: [
+          {
+            label: this.$t("Name"),
+            field: "title",
+            width: 200,
+            sortable: true,
+            truncate: true,
+            direction: "none",
+          },
+          {
+            label: this.$t("Description"),
+            field: "description",
+            width: 200,
+            sortable: true,
+            direction: "none",
+            sortField: "description",
+          },
+          {
+            label: this.$t("Type of Screen"),
+            field: "screen_type",
+            width: 160,
+            sortable: true,
+            direction: "none",
+            sortField: "screen_type",
+          },
+          {
+            label: this.$t("Modified"),
+            field: "updated_at",
+            format: "datetime",
+            width: 160,
+            sortable: true,
+            direction: "none",
+          },
+          {
+            name: "__slot:actions",
+            field: "actions",
+            width: 60,
+          }
+        ]
+      };
+    },
+
+    methods: {
+      onMyTemplateNavigate() {
+        console.log('ellipsis menu action');
+      },
+      fetch() {
+        //TODO: UPDATE FUNCTIONALITY FOR FETCHING 'MY TEMPLATES' FROM SCREEN TEMPLATES
+          this.loading = true;
+          //change method sort by slot name
+          this.orderBy = this.orderBy === "__slot:title" ? "title" : this.orderBy;
+          // Load from our api client
+          ProcessMaker.apiClient
+            .get(
+              "screens" +
+                "?page=" +
+                this.page +
+                "&per_page=" +
+                this.perPage +
+                "&filter=" +
+                this.filter +
+                "&order_by=" +
+                this.orderBy +
+                "&order_direction=" +
+                this.orderDirection +
+                "&include=categories,category" +
+                "&exclude=config"
+        )
+            .then(response => {
+              this.data = this.transform(response.data);
+              this.loading = false;
+            });
+      },
+    },
+  };
+  </script>
+
+<style lang="scss" scoped>
+:deep(th#_description) {
+  width: 250px;
+}
+
+.my-templates-table-card {
+  padding: 0;
+}
+</style>

resources/js/processes/screen-templates/index.js

@@ -0,0 +1,26 @@
+import Vue from "vue";
+import MyTemplatesListing from "../screen-templates/components/MyTemplatesListing";
+
+new Vue({
+  el: "#myTemplatesIndex",
+  components: {
+    MyTemplatesListing,
+  },
+  data: {
+    filter: "",
+    pmql: "",
+    urlPmql: "",
+  },
+  methods: {
+    onNLQConversion(query) {
+        this.onChange(query);
+        this.reload();
+      },
+      onChange(query) {
+        this.pmql = query;
+      },
+      reload() {
+        this.$refs.myTemplatesListing.fetch();
+      },
+  },
+});