FOUR-19237: Cases list "Pagination"

resources/jscomposition/base/form/Dropdown.vue

@@ -21,6 +21,7 @@
  <transition :name="animation">
  <div
  v-if="show"
+ ref="containerRef"
  class="tw-fixed tw-mt-1 tw-rounded-lg tw-z-10 tw-shadow-lg tw-bg-white tw-ring-1 tw-ring-inset tw-ring-gray-300"
  :style="{ width: `${widthContainer}px`, top: `${top}px` }">
  <ul class="tw-list-none tw-overflow-hidden tw-rounded">
@@ -92,6 +93,8 @@ export default defineComponent({
  emits: ["input", "change"],
  setup(props, { emit }) {
  const inputRef = ref();
+ const containerRef = ref();
+
  const show = ref(false);
  const widthContainer = ref(100);
  const top = ref(0);
@@ -121,8 +124,18 @@ export default defineComponent({
  emit("change", option);
  };
 
+ /**
+ * This method calculates the new position for dropdown menu
+ * Considers:
+ * - Space down in relation to viewport
+ *
+ * Increase other use cases
+ */
  const calculatePosition = () => {
  const rect = inputRef.value?.getBoundingClientRect();
+ const containerRect = containerRef.value.getBoundingClientRect();
+ const viewportWidth = window.innerWidth;
+ const viewportHeight = window.innerHeight;
 
  widthContainer.value = rect.width || 100;
 
@@ -137,6 +150,14 @@ export default defineComponent({
  container = container.parentElement;
  }
 
+ // Check: Does the dropdown menu have space down?
+ if (rect.top + containerRect.height > viewportHeight) {
+ topPosition = rect.top - containerRect.height;
+
+ top.value = topPosition;
+ return;
+ }
+
  top.value = inputRef.value.offsetTop - topPosition;
  };
 
@@ -145,10 +166,10 @@ export default defineComponent({
  };
 
  const toogleShow = ($event) => {
-calculatePosition($event);
+show.value = !show.value;
 
  nextTick(() => {
-show.value = !show.value;
+calculatePosition($event);
  });
  };
 
@@ -161,6 +182,7 @@ export default defineComponent({
  });
 
  return {
+ containerRef,
  show,
  data,
  inputRef,

resources/jscomposition/base/table/TCell.vue

@@ -11,8 +11,9 @@
  </slot>
  </div>
  <component
+ :is="getComponent()"
  v-else
-:is="column.cellRenderer()"
+v-bind="getParams()"
  :columns="columns"
  :column="column"
  :row="row" />
@@ -45,7 +46,14 @@ export default defineComponent({
  }
  return get(props.row, props.column?.field) || "";
  };
+
+ const getComponent = () => props.column.cellRenderer().component;
+
+ const getParams = () => props.column.cellRenderer().params || {};
+
  return {
+ getComponent,
+ getParams,
  getValue,
  };
  },

resources/jscomposition/base/table/index.js

@@ -1,5 +1,5 @@
 import BaseTable from "./BaseTable.vue";
-import Pagination from "./Pagination.vue";
+import Pagination from "../../system/table/Pagination.vue";
 import TCell from "./TCell.vue";
 import THeader from "./THeader.vue";
 import TRow from "./TRow.vue";

resources/jscomposition/base/ui/AppAvatar.vue

@@ -1,16 +1,22 @@
 <template>
- <span v-if="initials"
- class="tw-inline-flex tw-items-center tw-justify-center tw-h-6 tw-w-6 tw-rounded-full tw-bg-gray-500 tw-ring-1 tw-ring-white">
- <span class="tw-text-xs tw-font-medium tw-leading-none tw-text-white">{{ initials }}</span>
- </span>
+ <span
+ v-if="initials"
+ class="tw-inline-flex tw-items-center tw-justify-center tw-h-6 tw-w-6
+ tw-rounded-full tw-bg-gray-500 tw-ring-1 tw-ring-white"
+ @click.prevent="$emit('click')">
+ <span class="tw-text-xs tw-font-medium tw-leading-none tw-text-white">{{ initials }}</span>
+ </span>
 
- <img v-else
- class="tw-relative tw-z-30 tw-inline-block tw-h-6 tw-w-6 tw-rounded-full tw-ring-1 tw-ring-white"
- src="https://images.unsplash.com/photo-1491528323818-fdd1faba62cc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
- alt="" />
+ <img
+ v-else
+ class="tw-relative tw-z-30 tw-inline-block tw-h-6 tw-w-6 tw-rounded-full tw-ring-1 tw-ring-white"
+ src="https://images.unsplash.com/photo-1491528323818-fdd1faba62cc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
+ alt=""
+ @click.prevent="$emit('click')">
 </template>
 <script>
 import { defineComponent } from "vue";
+
 export default defineComponent({
  props: {
  src: {
@@ -22,7 +28,7 @@ export default defineComponent({
  default: () => "NA",
  },
  },
- setup(props, {emit}) {
+ setup(props, {emit}) {
  return {};
  },
 });

resources/jscomposition/base/ui/AppPopover.vue

@@ -79,22 +79,6 @@ export default {
  top = wrapperRect.bottom + 10;
  }
  break;
- case "bottom":
- top = wrapperRect.bottom + 10;
- left = wrapperRect.left + wrapperRect.width / 2 - tooltipRect.width / 2;
- // Verify space bottom
- if (top + tooltipRect.height > viewportHeight) {
- calculatedPosition.value = "top";
- top = wrapperRect.top - tooltipRect.height - 10;
- }
-
- const leftaux = wrapperRect.left - tooltipRect.width - 10;
- // Verify space left
- if (leftaux < 0) {
- calculatedPosition.value = "right-bottom";
- left = wrapperRect.right + 100;
- }
- break;
  case "left":
  top = wrapperRect.top + wrapperRect.height / 2 - tooltipRect.height / 2;
  left = wrapperRect.left - tooltipRect.width - 10;
@@ -113,6 +97,22 @@ export default {
  left = wrapperRect.left - tooltipRect.width - 10;
  }
  break;
+ case "bottom":
+ default:
+ top = wrapperRect.bottom + 10;
+ left = wrapperRect.left + wrapperRect.width / 2 - tooltipRect.width / 2;
+ // Verify space bottom
+ if (top + tooltipRect.height > viewportHeight) {
+ calculatedPosition.value = "top";
+ top = wrapperRect.top - tooltipRect.height - 10;
+ }
+
+ const leftaux = wrapperRect.left - tooltipRect.width - 10;
+ // Verify space left
+ if (leftaux < 0) {
+ calculatedPosition.value = "right-bottom";
+ left = wrapperRect.right + 100;
+ }
  }
 
  // Verify if tooltip leaves the viewport

resources/jscomposition/cases/casesDetail/components/RequestTable.vue

@@ -3,9 +3,11 @@
  <BaseTable
  id="request-table"
  :columns="columnsConfig"
- :data="data"
- />
- <Pagination />
+ :data="data" />
+ <Pagination
+ :total="dataPagination.total"
+ :page="dataPagination.page"
+ :pages="dataPagination.pages" />
  </div>
 </template>
 
@@ -20,6 +22,12 @@ export default defineComponent({
  setup() {
  const data = ref(null);
  const columnsConfig = ref(null);
+ const dataPagination = ref({
+ total: 153,
+ page: 0,
+ pages: 10,
+ perPage: 15,
+ });
 
  onMounted(async () => {
  data.value = await getData();
@@ -28,6 +36,7 @@ export default defineComponent({
 
  return {
  data,
+ dataPagination,
  columnsConfig,
  };
  },

resources/jscomposition/cases/casesDetail/components/TaskTable.vue

@@ -3,9 +3,11 @@
  <BaseTable
  id="task-table"
  :columns="columnsConfig"
- :data="data"
- />
- <Pagination />
+ :data="data" />
+ <Pagination
+ :total="dataPagination.total"
+ :page="dataPagination.page"
+ :pages="dataPagination.pages" />
  </div>
 </template>
 
@@ -20,6 +22,12 @@ export default defineComponent({
  setup() {
  const data = ref(null);
  const columnsConfig = ref(null);
+ const dataPagination = ref({
+ total: 153,
+ page: 0,
+ pages: 10,
+ perPage: 15,
+ });
 
  onMounted(async () => {
  data.value = await getData();
@@ -28,6 +36,7 @@ export default defineComponent({
 
  return {
  data,
+ dataPagination,
  columnsConfig,
  };
  },

resources/jscomposition/base/form/Dropdown.vue

@@ -21,6 +21,7 @@
  <transition :name="animation">
  <div
  v-if="show"
+ ref="containerRef"
  class="tw-fixed tw-mt-1 tw-rounded-lg tw-z-10 tw-shadow-lg tw-bg-white tw-ring-1 tw-ring-inset tw-ring-gray-300"
  :style="{ width: `${widthContainer}px`, top: `${top}px` }">
  <ul class="tw-list-none tw-overflow-hidden tw-rounded">
@@ -92,6 +93,8 @@ export default defineComponent({
  emits: ["input", "change"],
  setup(props, { emit }) {
  const inputRef = ref();
+ const containerRef = ref();
+
  const show = ref(false);
  const widthContainer = ref(100);
  const top = ref(0);
@@ -121,8 +124,18 @@ export default defineComponent({
  emit("change", option);
  };
 
+ /**
+ * This method calculates the new position for dropdown menu
+ * Considers:
+ * - Space down in relation to viewport
+ *
+ * Increase other use cases
+ */
  const calculatePosition = () => {
  const rect = inputRef.value?.getBoundingClientRect();
+ const containerRect = containerRef.value.getBoundingClientRect();
+ const viewportWidth = window.innerWidth;
+ const viewportHeight = window.innerHeight;
 
  widthContainer.value = rect.width || 100;
 
@@ -137,6 +150,14 @@ export default defineComponent({
  container = container.parentElement;
  }
 
+ // Check: Does the dropdown menu have space down?
+ if (rect.top + containerRect.height > viewportHeight) {
+ topPosition = rect.top - containerRect.height;
+
+ top.value = topPosition;
+ return;
+ }
+
  top.value = inputRef.value.offsetTop - topPosition;
  };
 
@@ -145,10 +166,10 @@ export default defineComponent({
  };
 
  const toogleShow = ($event) => {
-calculatePosition($event);
+show.value = !show.value;
 
  nextTick(() => {
-show.value = !show.value;
+calculatePosition($event);
  });
  };
 
@@ -161,6 +182,7 @@ export default defineComponent({
  });
 
  return {
+ containerRef,
  show,
  data,
  inputRef,

resources/jscomposition/base/table/TCell.vue

@@ -11,8 +11,9 @@
  </slot>
  </div>
  <component
+ :is="getComponent()"
  v-else
-:is="column.cellRenderer()"
+v-bind="getParams()"
  :columns="columns"
  :column="column"
  :row="row" />
@@ -45,7 +46,14 @@ export default defineComponent({
  }
  return get(props.row, props.column?.field) || "";
  };
+
+ const getComponent = () => props.column.cellRenderer().component;
+
+ const getParams = () => props.column.cellRenderer().params || {};
+
  return {
+ getComponent,
+ getParams,
  getValue,
  };
  },

resources/jscomposition/base/table/index.js

@@ -1,5 +1,5 @@
 import BaseTable from "./BaseTable.vue";
-import Pagination from "./Pagination.vue";
+import Pagination from "../../system/table/Pagination.vue";
 import TCell from "./TCell.vue";
 import THeader from "./THeader.vue";
 import TRow from "./TRow.vue";

resources/jscomposition/base/ui/AppAvatar.vue

@@ -1,16 +1,22 @@
 <template>
- <span v-if="initials"
- class="tw-inline-flex tw-items-center tw-justify-center tw-h-6 tw-w-6 tw-rounded-full tw-bg-gray-500 tw-ring-1 tw-ring-white">
- <span class="tw-text-xs tw-font-medium tw-leading-none tw-text-white">{{ initials }}</span>
- </span>
+ <span
+ v-if="initials"
+ class="tw-inline-flex tw-items-center tw-justify-center tw-h-6 tw-w-6
+ tw-rounded-full tw-bg-gray-500 tw-ring-1 tw-ring-white"
+ @click.prevent="$emit('click')">
+ <span class="tw-text-xs tw-font-medium tw-leading-none tw-text-white">{{ initials }}</span>
+ </span>
 
- <img v-else
- class="tw-relative tw-z-30 tw-inline-block tw-h-6 tw-w-6 tw-rounded-full tw-ring-1 tw-ring-white"
- src="https://images.unsplash.com/photo-1491528323818-fdd1faba62cc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
- alt="" />
+ <img
+ v-else
+ class="tw-relative tw-z-30 tw-inline-block tw-h-6 tw-w-6 tw-rounded-full tw-ring-1 tw-ring-white"
+ src="https://images.unsplash.com/photo-1491528323818-fdd1faba62cc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
+ alt=""
+ @click.prevent="$emit('click')">
 </template>
 <script>
 import { defineComponent } from "vue";
+
 export default defineComponent({
  props: {
  src: {
@@ -22,7 +28,7 @@ export default defineComponent({
  default: () => "NA",
  },
  },
- setup(props, {emit}) {
+ setup(props, {emit}) {
  return {};
  },
 });

resources/jscomposition/base/ui/AppPopover.vue

@@ -79,22 +79,6 @@ export default {
  top = wrapperRect.bottom + 10;
  }
  break;
- case "bottom":
- top = wrapperRect.bottom + 10;
- left = wrapperRect.left + wrapperRect.width / 2 - tooltipRect.width / 2;
- // Verify space bottom
- if (top + tooltipRect.height > viewportHeight) {
- calculatedPosition.value = "top";
- top = wrapperRect.top - tooltipRect.height - 10;
- }
-
- const leftaux = wrapperRect.left - tooltipRect.width - 10;
- // Verify space left
- if (leftaux < 0) {
- calculatedPosition.value = "right-bottom";
- left = wrapperRect.right + 100;
- }
- break;
  case "left":
  top = wrapperRect.top + wrapperRect.height / 2 - tooltipRect.height / 2;
  left = wrapperRect.left - tooltipRect.width - 10;
@@ -113,6 +97,22 @@ export default {
  left = wrapperRect.left - tooltipRect.width - 10;
  }
  break;
+ case "bottom":
+ default:
+ top = wrapperRect.bottom + 10;
+ left = wrapperRect.left + wrapperRect.width / 2 - tooltipRect.width / 2;
+ // Verify space bottom
+ if (top + tooltipRect.height > viewportHeight) {
+ calculatedPosition.value = "top";
+ top = wrapperRect.top - tooltipRect.height - 10;
+ }
+
+ const leftaux = wrapperRect.left - tooltipRect.width - 10;
+ // Verify space left
+ if (leftaux < 0) {
+ calculatedPosition.value = "right-bottom";
+ left = wrapperRect.right + 100;
+ }
  }
 
  // Verify if tooltip leaves the viewport

resources/jscomposition/cases/casesDetail/components/RequestTable.vue

@@ -3,9 +3,11 @@
  <BaseTable
  id="request-table"
  :columns="columnsConfig"
- :data="data"
- />
- <Pagination />
+ :data="data" />
+ <Pagination
+ :total="dataPagination.total"
+ :page="dataPagination.page"
+ :pages="dataPagination.pages" />
  </div>
 </template>
 
@@ -20,6 +22,12 @@ export default defineComponent({
  setup() {
  const data = ref(null);
  const columnsConfig = ref(null);
+ const dataPagination = ref({
+ total: 153,
+ page: 0,
+ pages: 10,
+ perPage: 15,
+ });
 
  onMounted(async () => {
  data.value = await getData();
@@ -28,6 +36,7 @@ export default defineComponent({
 
  return {
  data,
+ dataPagination,
  columnsConfig,
  };
  },

resources/jscomposition/cases/casesDetail/components/TaskTable.vue

@@ -3,9 +3,11 @@
  <BaseTable
  id="task-table"
  :columns="columnsConfig"
- :data="data"
- />
- <Pagination />
+ :data="data" />
+ <Pagination
+ :total="dataPagination.total"
+ :page="dataPagination.page"
+ :pages="dataPagination.pages" />
  </div>
 </template>
 
@@ -20,6 +22,12 @@ export default defineComponent({
  setup() {
  const data = ref(null);
  const columnsConfig = ref(null);
+ const dataPagination = ref({
+ total: 153,
+ page: 0,
+ pages: 10,
+ perPage: 15,
+ });
 
  onMounted(async () => {
  data.value = await getData();
@@ -28,6 +36,7 @@ export default defineComponent({
 
  return {
  data,
+ dataPagination,
  columnsConfig,
  };
  },

resources/jscomposition/base/form/Dropdown.vue

@@ -21,6 +21,7 @@
  <transition :name="animation">
  <div
  v-if="show"
+ ref="containerRef"
  class="tw-fixed tw-mt-1 tw-rounded-lg tw-z-10 tw-shadow-lg tw-bg-white tw-ring-1 tw-ring-inset tw-ring-gray-300"
  :style="{ width: `${widthContainer}px`, top: `${top}px` }">
  <ul class="tw-list-none tw-overflow-hidden tw-rounded">
@@ -92,6 +93,8 @@ export default defineComponent({
  emits: ["input", "change"],
  setup(props, { emit }) {
  const inputRef = ref();
+ const containerRef = ref();
+
  const show = ref(false);
  const widthContainer = ref(100);
  const top = ref(0);
@@ -121,8 +124,18 @@ export default defineComponent({
  emit("change", option);
  };
 
+ /**
+ * This method calculates the new position for dropdown menu
+ * Considers:
+ * - Space down in relation to viewport
+ *
+ * Increase other use cases
+ */
  const calculatePosition = () => {
  const rect = inputRef.value?.getBoundingClientRect();
+ const containerRect = containerRef.value.getBoundingClientRect();
+ const viewportWidth = window.innerWidth;
+ const viewportHeight = window.innerHeight;
 
  widthContainer.value = rect.width || 100;
 
@@ -137,6 +150,14 @@ export default defineComponent({
  container = container.parentElement;
  }
 
+ // Check: Does the dropdown menu have space down?
+ if (rect.top + containerRect.height > viewportHeight) {
+ topPosition = rect.top - containerRect.height;
+
+ top.value = topPosition;
+ return;
+ }
+
  top.value = inputRef.value.offsetTop - topPosition;
  };
 
@@ -145,10 +166,10 @@ export default defineComponent({
  };
 
  const toogleShow = ($event) => {
-calculatePosition($event);
+show.value = !show.value;
 
  nextTick(() => {
-show.value = !show.value;
+calculatePosition($event);
  });
  };
 
@@ -161,6 +182,7 @@ export default defineComponent({
  });
 
  return {
+ containerRef,
  show,
  data,
  inputRef,

resources/jscomposition/base/table/TCell.vue

@@ -11,8 +11,9 @@
  </slot>
  </div>
  <component
+ :is="getComponent()"
  v-else
-:is="column.cellRenderer()"
+v-bind="getParams()"
  :columns="columns"
  :column="column"
  :row="row" />
@@ -45,7 +46,14 @@ export default defineComponent({
  }
  return get(props.row, props.column?.field) || "";
  };
+
+ const getComponent = () => props.column.cellRenderer().component;
+
+ const getParams = () => props.column.cellRenderer().params || {};
+
  return {
+ getComponent,
+ getParams,
  getValue,
  };
  },

resources/jscomposition/base/table/index.js

@@ -1,5 +1,5 @@
 import BaseTable from "./BaseTable.vue";
-import Pagination from "./Pagination.vue";
+import Pagination from "../../system/table/Pagination.vue";
 import TCell from "./TCell.vue";
 import THeader from "./THeader.vue";
 import TRow from "./TRow.vue";

resources/jscomposition/base/ui/AppAvatar.vue

@@ -1,16 +1,22 @@
 <template>
- <span v-if="initials"
- class="tw-inline-flex tw-items-center tw-justify-center tw-h-6 tw-w-6 tw-rounded-full tw-bg-gray-500 tw-ring-1 tw-ring-white">
- <span class="tw-text-xs tw-font-medium tw-leading-none tw-text-white">{{ initials }}</span>
- </span>
+ <span
+ v-if="initials"
+ class="tw-inline-flex tw-items-center tw-justify-center tw-h-6 tw-w-6
+ tw-rounded-full tw-bg-gray-500 tw-ring-1 tw-ring-white"
+ @click.prevent="$emit('click')">
+ <span class="tw-text-xs tw-font-medium tw-leading-none tw-text-white">{{ initials }}</span>
+ </span>
 
- <img v-else
- class="tw-relative tw-z-30 tw-inline-block tw-h-6 tw-w-6 tw-rounded-full tw-ring-1 tw-ring-white"
- src="https://images.unsplash.com/photo-1491528323818-fdd1faba62cc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
- alt="" />
+ <img
+ v-else
+ class="tw-relative tw-z-30 tw-inline-block tw-h-6 tw-w-6 tw-rounded-full tw-ring-1 tw-ring-white"
+ src="https://images.unsplash.com/photo-1491528323818-fdd1faba62cc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
+ alt=""
+ @click.prevent="$emit('click')">
 </template>
 <script>
 import { defineComponent } from "vue";
+
 export default defineComponent({
  props: {
  src: {
@@ -22,7 +28,7 @@ export default defineComponent({
  default: () => "NA",
  },
  },
- setup(props, {emit}) {
+ setup(props, {emit}) {
  return {};
  },
 });

resources/jscomposition/base/ui/AppPopover.vue

@@ -79,22 +79,6 @@ export default {
  top = wrapperRect.bottom + 10;
  }
  break;
- case "bottom":
- top = wrapperRect.bottom + 10;
- left = wrapperRect.left + wrapperRect.width / 2 - tooltipRect.width / 2;
- // Verify space bottom
- if (top + tooltipRect.height > viewportHeight) {
- calculatedPosition.value = "top";
- top = wrapperRect.top - tooltipRect.height - 10;
- }
-
- const leftaux = wrapperRect.left - tooltipRect.width - 10;
- // Verify space left
- if (leftaux < 0) {
- calculatedPosition.value = "right-bottom";
- left = wrapperRect.right + 100;
- }
- break;
  case "left":
  top = wrapperRect.top + wrapperRect.height / 2 - tooltipRect.height / 2;
  left = wrapperRect.left - tooltipRect.width - 10;
@@ -113,6 +97,22 @@ export default {
  left = wrapperRect.left - tooltipRect.width - 10;
  }
  break;
+ case "bottom":
+ default:
+ top = wrapperRect.bottom + 10;
+ left = wrapperRect.left + wrapperRect.width / 2 - tooltipRect.width / 2;
+ // Verify space bottom
+ if (top + tooltipRect.height > viewportHeight) {
+ calculatedPosition.value = "top";
+ top = wrapperRect.top - tooltipRect.height - 10;
+ }
+
+ const leftaux = wrapperRect.left - tooltipRect.width - 10;
+ // Verify space left
+ if (leftaux < 0) {
+ calculatedPosition.value = "right-bottom";
+ left = wrapperRect.right + 100;
+ }
  }
 
  // Verify if tooltip leaves the viewport

resources/jscomposition/cases/casesDetail/components/RequestTable.vue

@@ -3,9 +3,11 @@
  <BaseTable
  id="request-table"
  :columns="columnsConfig"
- :data="data"
- />
- <Pagination />
+ :data="data" />
+ <Pagination
+ :total="dataPagination.total"
+ :page="dataPagination.page"
+ :pages="dataPagination.pages" />
  </div>
 </template>
 
@@ -20,6 +22,12 @@ export default defineComponent({
  setup() {
  const data = ref(null);
  const columnsConfig = ref(null);
+ const dataPagination = ref({
+ total: 153,
+ page: 0,
+ pages: 10,
+ perPage: 15,
+ });
 
  onMounted(async () => {
  data.value = await getData();
@@ -28,6 +36,7 @@ export default defineComponent({
 
  return {
  data,
+ dataPagination,
  columnsConfig,
  };
  },

resources/jscomposition/cases/casesDetail/components/TaskTable.vue

@@ -3,9 +3,11 @@
  <BaseTable
  id="task-table"
  :columns="columnsConfig"
- :data="data"
- />
- <Pagination />
+ :data="data" />
+ <Pagination
+ :total="dataPagination.total"
+ :page="dataPagination.page"
+ :pages="dataPagination.pages" />
  </div>
 </template>
 
@@ -20,6 +22,12 @@ export default defineComponent({
  setup() {
  const data = ref(null);
  const columnsConfig = ref(null);
+ const dataPagination = ref({
+ total: 153,
+ page: 0,
+ pages: 10,
+ perPage: 15,
+ });
 
  onMounted(async () => {
  data.value = await getData();
@@ -28,6 +36,7 @@ export default defineComponent({
 
  return {
  data,
+ dataPagination,
  columnsConfig,
  };
  },

resources/jscomposition/base/form/Dropdown.vue

@@ -21,6 +21,7 @@
  <transition :name="animation">
  <div
  v-if="show"
+ ref="containerRef"
  class="tw-fixed tw-mt-1 tw-rounded-lg tw-z-10 tw-shadow-lg tw-bg-white tw-ring-1 tw-ring-inset tw-ring-gray-300"
  :style="{ width: `${widthContainer}px`, top: `${top}px` }">
  <ul class="tw-list-none tw-overflow-hidden tw-rounded">
@@ -92,6 +93,8 @@ export default defineComponent({
  emits: ["input", "change"],
  setup(props, { emit }) {
  const inputRef = ref();
+ const containerRef = ref();
+
  const show = ref(false);
  const widthContainer = ref(100);
  const top = ref(0);
@@ -121,8 +124,18 @@ export default defineComponent({
  emit("change", option);
  };
 
+ /**
+ * This method calculates the new position for dropdown menu
+ * Considers:
+ * - Space down in relation to viewport
+ *
+ * Increase other use cases
+ */
  const calculatePosition = () => {
  const rect = inputRef.value?.getBoundingClientRect();
+ const containerRect = containerRef.value.getBoundingClientRect();
+ const viewportWidth = window.innerWidth;
+ const viewportHeight = window.innerHeight;
 
  widthContainer.value = rect.width || 100;
 
@@ -137,6 +150,14 @@ export default defineComponent({
  container = container.parentElement;
  }
 
+ // Check: Does the dropdown menu have space down?
+ if (rect.top + containerRect.height > viewportHeight) {
+ topPosition = rect.top - containerRect.height;
+
+ top.value = topPosition;
+ return;
+ }
+
  top.value = inputRef.value.offsetTop - topPosition;
  };
 
@@ -145,10 +166,10 @@ export default defineComponent({
  };
 
  const toogleShow = ($event) => {
-calculatePosition($event);
+show.value = !show.value;
 
  nextTick(() => {
-show.value = !show.value;
+calculatePosition($event);
  });
  };
 
@@ -161,6 +182,7 @@ export default defineComponent({
  });
 
  return {
+ containerRef,
  show,
  data,
  inputRef,

resources/jscomposition/base/table/TCell.vue

@@ -11,8 +11,9 @@
  </slot>
  </div>
  <component
+ :is="getComponent()"
  v-else
-:is="column.cellRenderer()"
+v-bind="getParams()"
  :columns="columns"
  :column="column"
  :row="row" />
@@ -45,7 +46,14 @@ export default defineComponent({
  }
  return get(props.row, props.column?.field) || "";
  };
+
+ const getComponent = () => props.column.cellRenderer().component;
+
+ const getParams = () => props.column.cellRenderer().params || {};
+
  return {
+ getComponent,
+ getParams,
  getValue,
  };
  },

resources/jscomposition/base/table/index.js

@@ -1,5 +1,5 @@
 import BaseTable from "./BaseTable.vue";
-import Pagination from "./Pagination.vue";
+import Pagination from "../../system/table/Pagination.vue";
 import TCell from "./TCell.vue";
 import THeader from "./THeader.vue";
 import TRow from "./TRow.vue";

resources/jscomposition/base/ui/AppAvatar.vue

@@ -1,16 +1,22 @@
 <template>
- <span v-if="initials"
- class="tw-inline-flex tw-items-center tw-justify-center tw-h-6 tw-w-6 tw-rounded-full tw-bg-gray-500 tw-ring-1 tw-ring-white">
- <span class="tw-text-xs tw-font-medium tw-leading-none tw-text-white">{{ initials }}</span>
- </span>
+ <span
+ v-if="initials"
+ class="tw-inline-flex tw-items-center tw-justify-center tw-h-6 tw-w-6
+ tw-rounded-full tw-bg-gray-500 tw-ring-1 tw-ring-white"
+ @click.prevent="$emit('click')">
+ <span class="tw-text-xs tw-font-medium tw-leading-none tw-text-white">{{ initials }}</span>
+ </span>
 
- <img v-else
- class="tw-relative tw-z-30 tw-inline-block tw-h-6 tw-w-6 tw-rounded-full tw-ring-1 tw-ring-white"
- src="https://images.unsplash.com/photo-1491528323818-fdd1faba62cc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
- alt="" />
+ <img
+ v-else
+ class="tw-relative tw-z-30 tw-inline-block tw-h-6 tw-w-6 tw-rounded-full tw-ring-1 tw-ring-white"
+ src="https://images.unsplash.com/photo-1491528323818-fdd1faba62cc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
+ alt=""
+ @click.prevent="$emit('click')">
 </template>
 <script>
 import { defineComponent } from "vue";
+
 export default defineComponent({
  props: {
  src: {
@@ -22,7 +28,7 @@ export default defineComponent({
  default: () => "NA",
  },
  },
- setup(props, {emit}) {
+ setup(props, {emit}) {
  return {};
  },
 });

resources/jscomposition/base/ui/AppPopover.vue

@@ -79,22 +79,6 @@ export default {
  top = wrapperRect.bottom + 10;
  }
  break;
- case "bottom":
- top = wrapperRect.bottom + 10;
- left = wrapperRect.left + wrapperRect.width / 2 - tooltipRect.width / 2;
- // Verify space bottom
- if (top + tooltipRect.height > viewportHeight) {
- calculatedPosition.value = "top";
- top = wrapperRect.top - tooltipRect.height - 10;
- }
-
- const leftaux = wrapperRect.left - tooltipRect.width - 10;
- // Verify space left
- if (leftaux < 0) {
- calculatedPosition.value = "right-bottom";
- left = wrapperRect.right + 100;
- }
- break;
  case "left":
  top = wrapperRect.top + wrapperRect.height / 2 - tooltipRect.height / 2;
  left = wrapperRect.left - tooltipRect.width - 10;
@@ -113,6 +97,22 @@ export default {
  left = wrapperRect.left - tooltipRect.width - 10;
  }
  break;
+ case "bottom":
+ default:
+ top = wrapperRect.bottom + 10;
+ left = wrapperRect.left + wrapperRect.width / 2 - tooltipRect.width / 2;
+ // Verify space bottom
+ if (top + tooltipRect.height > viewportHeight) {
+ calculatedPosition.value = "top";
+ top = wrapperRect.top - tooltipRect.height - 10;
+ }
+
+ const leftaux = wrapperRect.left - tooltipRect.width - 10;
+ // Verify space left
+ if (leftaux < 0) {
+ calculatedPosition.value = "right-bottom";
+ left = wrapperRect.right + 100;
+ }
  }
 
  // Verify if tooltip leaves the viewport

resources/jscomposition/cases/casesDetail/components/RequestTable.vue

@@ -3,9 +3,11 @@
  <BaseTable
  id="request-table"
  :columns="columnsConfig"
- :data="data"
- />
- <Pagination />
+ :data="data" />
+ <Pagination
+ :total="dataPagination.total"
+ :page="dataPagination.page"
+ :pages="dataPagination.pages" />
  </div>
 </template>
 
@@ -20,6 +22,12 @@ export default defineComponent({
  setup() {
  const data = ref(null);
  const columnsConfig = ref(null);
+ const dataPagination = ref({
+ total: 153,
+ page: 0,
+ pages: 10,
+ perPage: 15,
+ });
 
  onMounted(async () => {
  data.value = await getData();
@@ -28,6 +36,7 @@ export default defineComponent({
 
  return {
  data,
+ dataPagination,
  columnsConfig,
  };
  },

resources/jscomposition/cases/casesDetail/components/TaskTable.vue

@@ -3,9 +3,11 @@
  <BaseTable
  id="task-table"
  :columns="columnsConfig"
- :data="data"
- />
- <Pagination />
+ :data="data" />
+ <Pagination
+ :total="dataPagination.total"
+ :page="dataPagination.page"
+ :pages="dataPagination.pages" />
  </div>
 </template>
 
@@ -20,6 +22,12 @@ export default defineComponent({
  setup() {
  const data = ref(null);
  const columnsConfig = ref(null);
+ const dataPagination = ref({
+ total: 153,
+ page: 0,
+ pages: 10,
+ perPage: 15,
+ });
 
  onMounted(async () => {
  data.value = await getData();
@@ -28,6 +36,7 @@ export default defineComponent({
 
  return {
  data,
+ dataPagination,
  columnsConfig,
  };
  },

resources/jscomposition/base/form/Dropdown.vue

@@ -21,6 +21,7 @@
  <transition :name="animation">
  <div
  v-if="show"
+ ref="containerRef"
  class="tw-fixed tw-mt-1 tw-rounded-lg tw-z-10 tw-shadow-lg tw-bg-white tw-ring-1 tw-ring-inset tw-ring-gray-300"
  :style="{ width: `${widthContainer}px`, top: `${top}px` }">
  <ul class="tw-list-none tw-overflow-hidden tw-rounded">
@@ -92,6 +93,8 @@ export default defineComponent({
  emits: ["input", "change"],
  setup(props, { emit }) {
  const inputRef = ref();
+ const containerRef = ref();
+
  const show = ref(false);
  const widthContainer = ref(100);
  const top = ref(0);
@@ -121,8 +124,18 @@ export default defineComponent({
  emit("change", option);
  };
 
+ /**
+ * This method calculates the new position for dropdown menu
+ * Considers:
+ * - Space down in relation to viewport
+ *
+ * Increase other use cases
+ */
  const calculatePosition = () => {
  const rect = inputRef.value?.getBoundingClientRect();
+ const containerRect = containerRef.value.getBoundingClientRect();
+ const viewportWidth = window.innerWidth;
+ const viewportHeight = window.innerHeight;
 
  widthContainer.value = rect.width || 100;
 
@@ -137,6 +150,14 @@ export default defineComponent({
  container = container.parentElement;
  }
 
+ // Check: Does the dropdown menu have space down?
+ if (rect.top + containerRect.height > viewportHeight) {
+ topPosition = rect.top - containerRect.height;
+
+ top.value = topPosition;
+ return;
+ }
+
  top.value = inputRef.value.offsetTop - topPosition;
  };
 
@@ -145,10 +166,10 @@ export default defineComponent({
  };
 
  const toogleShow = ($event) => {
-calculatePosition($event);
+show.value = !show.value;
 
  nextTick(() => {
-show.value = !show.value;
+calculatePosition($event);
  });
  };
 
@@ -161,6 +182,7 @@ export default defineComponent({
  });
 
  return {
+ containerRef,
  show,
  data,
  inputRef,

resources/jscomposition/base/table/TCell.vue

@@ -11,8 +11,9 @@
  </slot>
  </div>
  <component
+ :is="getComponent()"
  v-else
-:is="column.cellRenderer()"
+v-bind="getParams()"
  :columns="columns"
  :column="column"
  :row="row" />
@@ -45,7 +46,14 @@ export default defineComponent({
  }
  return get(props.row, props.column?.field) || "";
  };
+
+ const getComponent = () => props.column.cellRenderer().component;
+
+ const getParams = () => props.column.cellRenderer().params || {};
+
  return {
+ getComponent,
+ getParams,
  getValue,
  };
  },

resources/jscomposition/base/table/index.js

@@ -1,5 +1,5 @@
 import BaseTable from "./BaseTable.vue";
-import Pagination from "./Pagination.vue";
+import Pagination from "../../system/table/Pagination.vue";
 import TCell from "./TCell.vue";
 import THeader from "./THeader.vue";
 import TRow from "./TRow.vue";

resources/jscomposition/base/ui/AppAvatar.vue

@@ -1,16 +1,22 @@
 <template>
- <span v-if="initials"
- class="tw-inline-flex tw-items-center tw-justify-center tw-h-6 tw-w-6 tw-rounded-full tw-bg-gray-500 tw-ring-1 tw-ring-white">
- <span class="tw-text-xs tw-font-medium tw-leading-none tw-text-white">{{ initials }}</span>
- </span>
+ <span
+ v-if="initials"
+ class="tw-inline-flex tw-items-center tw-justify-center tw-h-6 tw-w-6
+ tw-rounded-full tw-bg-gray-500 tw-ring-1 tw-ring-white"
+ @click.prevent="$emit('click')">
+ <span class="tw-text-xs tw-font-medium tw-leading-none tw-text-white">{{ initials }}</span>
+ </span>
 
- <img v-else
- class="tw-relative tw-z-30 tw-inline-block tw-h-6 tw-w-6 tw-rounded-full tw-ring-1 tw-ring-white"
- src="https://images.unsplash.com/photo-1491528323818-fdd1faba62cc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
- alt="" />
+ <img
+ v-else
+ class="tw-relative tw-z-30 tw-inline-block tw-h-6 tw-w-6 tw-rounded-full tw-ring-1 tw-ring-white"
+ src="https://images.unsplash.com/photo-1491528323818-fdd1faba62cc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
+ alt=""
+ @click.prevent="$emit('click')">
 </template>
 <script>
 import { defineComponent } from "vue";
+
 export default defineComponent({
  props: {
  src: {
@@ -22,7 +28,7 @@ export default defineComponent({
  default: () => "NA",
  },
  },
- setup(props, {emit}) {
+ setup(props, {emit}) {
  return {};
  },
 });

resources/jscomposition/base/ui/AppPopover.vue

@@ -79,22 +79,6 @@ export default {
  top = wrapperRect.bottom + 10;
  }
  break;
- case "bottom":
- top = wrapperRect.bottom + 10;
- left = wrapperRect.left + wrapperRect.width / 2 - tooltipRect.width / 2;
- // Verify space bottom
- if (top + tooltipRect.height > viewportHeight) {
- calculatedPosition.value = "top";
- top = wrapperRect.top - tooltipRect.height - 10;
- }
-
- const leftaux = wrapperRect.left - tooltipRect.width - 10;
- // Verify space left
- if (leftaux < 0) {
- calculatedPosition.value = "right-bottom";
- left = wrapperRect.right + 100;
- }
- break;
  case "left":
  top = wrapperRect.top + wrapperRect.height / 2 - tooltipRect.height / 2;
  left = wrapperRect.left - tooltipRect.width - 10;
@@ -113,6 +97,22 @@ export default {
  left = wrapperRect.left - tooltipRect.width - 10;
  }
  break;
+ case "bottom":
+ default:
+ top = wrapperRect.bottom + 10;
+ left = wrapperRect.left + wrapperRect.width / 2 - tooltipRect.width / 2;
+ // Verify space bottom
+ if (top + tooltipRect.height > viewportHeight) {
+ calculatedPosition.value = "top";
+ top = wrapperRect.top - tooltipRect.height - 10;
+ }
+
+ const leftaux = wrapperRect.left - tooltipRect.width - 10;
+ // Verify space left
+ if (leftaux < 0) {
+ calculatedPosition.value = "right-bottom";
+ left = wrapperRect.right + 100;
+ }
  }
 
  // Verify if tooltip leaves the viewport

resources/jscomposition/cases/casesDetail/components/RequestTable.vue

@@ -3,9 +3,11 @@
  <BaseTable
  id="request-table"
  :columns="columnsConfig"
- :data="data"
- />
- <Pagination />
+ :data="data" />
+ <Pagination
+ :total="dataPagination.total"
+ :page="dataPagination.page"
+ :pages="dataPagination.pages" />
  </div>
 </template>
 
@@ -20,6 +22,12 @@ export default defineComponent({
  setup() {
  const data = ref(null);
  const columnsConfig = ref(null);
+ const dataPagination = ref({
+ total: 153,
+ page: 0,
+ pages: 10,
+ perPage: 15,
+ });
 
  onMounted(async () => {
  data.value = await getData();
@@ -28,6 +36,7 @@ export default defineComponent({
 
  return {
  data,
+ dataPagination,
  columnsConfig,
  };
  },

resources/jscomposition/cases/casesDetail/components/TaskTable.vue

@@ -3,9 +3,11 @@
  <BaseTable
  id="task-table"
  :columns="columnsConfig"
- :data="data"
- />
- <Pagination />
+ :data="data" />
+ <Pagination
+ :total="dataPagination.total"
+ :page="dataPagination.page"
+ :pages="dataPagination.pages" />
  </div>
 </template>
 
@@ -20,6 +22,12 @@ export default defineComponent({
  setup() {
  const data = ref(null);
  const columnsConfig = ref(null);
+ const dataPagination = ref({
+ total: 153,
+ page: 0,
+ pages: 10,
+ perPage: 15,
+ });
 
  onMounted(async () => {
  data.value = await getData();
@@ -28,6 +36,7 @@ export default defineComponent({
 
  return {
  data,
+ dataPagination,
  columnsConfig,
  };
  },

resources/jscomposition/base/form/Dropdown.vue

@@ -21,6 +21,7 @@
  <transition :name="animation">
  <div
  v-if="show"
+ ref="containerRef"
  class="tw-fixed tw-mt-1 tw-rounded-lg tw-z-10 tw-shadow-lg tw-bg-white tw-ring-1 tw-ring-inset tw-ring-gray-300"
  :style="{ width: `${widthContainer}px`, top: `${top}px` }">
  <ul class="tw-list-none tw-overflow-hidden tw-rounded">
@@ -92,6 +93,8 @@ export default defineComponent({
  emits: ["input", "change"],
  setup(props, { emit }) {
  const inputRef = ref();
+ const containerRef = ref();
+
  const show = ref(false);
  const widthContainer = ref(100);
  const top = ref(0);
@@ -121,8 +124,18 @@ export default defineComponent({
  emit("change", option);
  };
 
+ /**
+ * This method calculates the new position for dropdown menu
+ * Considers:
+ * - Space down in relation to viewport
+ *
+ * Increase other use cases
+ */
  const calculatePosition = () => {
  const rect = inputRef.value?.getBoundingClientRect();
+ const containerRect = containerRef.value.getBoundingClientRect();
+ const viewportWidth = window.innerWidth;
+ const viewportHeight = window.innerHeight;
 
  widthContainer.value = rect.width || 100;
 
@@ -137,6 +150,14 @@ export default defineComponent({
  container = container.parentElement;
  }
 
+ // Check: Does the dropdown menu have space down?
+ if (rect.top + containerRect.height > viewportHeight) {
+ topPosition = rect.top - containerRect.height;
+
+ top.value = topPosition;
+ return;
+ }
+
  top.value = inputRef.value.offsetTop - topPosition;
  };
 
@@ -145,10 +166,10 @@ export default defineComponent({
  };
 
  const toogleShow = ($event) => {
-calculatePosition($event);
+show.value = !show.value;
 
  nextTick(() => {
-show.value = !show.value;
+calculatePosition($event);
  });
  };
 
@@ -161,6 +182,7 @@ export default defineComponent({
  });
 
  return {
+ containerRef,
  show,
  data,
  inputRef,

resources/jscomposition/base/table/TCell.vue

@@ -11,8 +11,9 @@
  </slot>
  </div>
  <component
+ :is="getComponent()"
  v-else
-:is="column.cellRenderer()"
+v-bind="getParams()"
  :columns="columns"
  :column="column"
  :row="row" />
@@ -45,7 +46,14 @@ export default defineComponent({
  }
  return get(props.row, props.column?.field) || "";
  };
+
+ const getComponent = () => props.column.cellRenderer().component;
+
+ const getParams = () => props.column.cellRenderer().params || {};
+
  return {
+ getComponent,
+ getParams,
  getValue,
  };
  },

resources/jscomposition/base/table/index.js

@@ -1,5 +1,5 @@
 import BaseTable from "./BaseTable.vue";
-import Pagination from "./Pagination.vue";
+import Pagination from "../../system/table/Pagination.vue";
 import TCell from "./TCell.vue";
 import THeader from "./THeader.vue";
 import TRow from "./TRow.vue";

resources/jscomposition/base/ui/AppAvatar.vue

@@ -1,16 +1,22 @@
 <template>
- <span v-if="initials"
- class="tw-inline-flex tw-items-center tw-justify-center tw-h-6 tw-w-6 tw-rounded-full tw-bg-gray-500 tw-ring-1 tw-ring-white">
- <span class="tw-text-xs tw-font-medium tw-leading-none tw-text-white">{{ initials }}</span>
- </span>
+ <span
+ v-if="initials"
+ class="tw-inline-flex tw-items-center tw-justify-center tw-h-6 tw-w-6
+ tw-rounded-full tw-bg-gray-500 tw-ring-1 tw-ring-white"
+ @click.prevent="$emit('click')">
+ <span class="tw-text-xs tw-font-medium tw-leading-none tw-text-white">{{ initials }}</span>
+ </span>
 
- <img v-else
- class="tw-relative tw-z-30 tw-inline-block tw-h-6 tw-w-6 tw-rounded-full tw-ring-1 tw-ring-white"
- src="https://images.unsplash.com/photo-1491528323818-fdd1faba62cc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
- alt="" />
+ <img
+ v-else
+ class="tw-relative tw-z-30 tw-inline-block tw-h-6 tw-w-6 tw-rounded-full tw-ring-1 tw-ring-white"
+ src="https://images.unsplash.com/photo-1491528323818-fdd1faba62cc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
+ alt=""
+ @click.prevent="$emit('click')">
 </template>
 <script>
 import { defineComponent } from "vue";
+
 export default defineComponent({
  props: {
  src: {
@@ -22,7 +28,7 @@ export default defineComponent({
  default: () => "NA",
  },
  },
- setup(props, {emit}) {
+ setup(props, {emit}) {
  return {};
  },
 });

resources/jscomposition/base/ui/AppPopover.vue

@@ -79,22 +79,6 @@ export default {
  top = wrapperRect.bottom + 10;
  }
  break;
- case "bottom":
- top = wrapperRect.bottom + 10;
- left = wrapperRect.left + wrapperRect.width / 2 - tooltipRect.width / 2;
- // Verify space bottom
- if (top + tooltipRect.height > viewportHeight) {
- calculatedPosition.value = "top";
- top = wrapperRect.top - tooltipRect.height - 10;
- }
-
- const leftaux = wrapperRect.left - tooltipRect.width - 10;
- // Verify space left
- if (leftaux < 0) {
- calculatedPosition.value = "right-bottom";
- left = wrapperRect.right + 100;
- }
- break;
  case "left":
  top = wrapperRect.top + wrapperRect.height / 2 - tooltipRect.height / 2;
  left = wrapperRect.left - tooltipRect.width - 10;
@@ -113,6 +97,22 @@ export default {
  left = wrapperRect.left - tooltipRect.width - 10;
  }
  break;
+ case "bottom":
+ default:
+ top = wrapperRect.bottom + 10;
+ left = wrapperRect.left + wrapperRect.width / 2 - tooltipRect.width / 2;
+ // Verify space bottom
+ if (top + tooltipRect.height > viewportHeight) {
+ calculatedPosition.value = "top";
+ top = wrapperRect.top - tooltipRect.height - 10;
+ }
+
+ const leftaux = wrapperRect.left - tooltipRect.width - 10;
+ // Verify space left
+ if (leftaux < 0) {
+ calculatedPosition.value = "right-bottom";
+ left = wrapperRect.right + 100;
+ }
  }
 
  // Verify if tooltip leaves the viewport

resources/jscomposition/cases/casesDetail/components/RequestTable.vue

@@ -3,9 +3,11 @@
  <BaseTable
  id="request-table"
  :columns="columnsConfig"
- :data="data"
- />
- <Pagination />
+ :data="data" />
+ <Pagination
+ :total="dataPagination.total"
+ :page="dataPagination.page"
+ :pages="dataPagination.pages" />
  </div>
 </template>
 
@@ -20,6 +22,12 @@ export default defineComponent({
  setup() {
  const data = ref(null);
  const columnsConfig = ref(null);
+ const dataPagination = ref({
+ total: 153,
+ page: 0,
+ pages: 10,
+ perPage: 15,
+ });
 
  onMounted(async () => {
  data.value = await getData();
@@ -28,6 +36,7 @@ export default defineComponent({
 
  return {
  data,
+ dataPagination,
  columnsConfig,
  };
  },

resources/jscomposition/cases/casesDetail/components/TaskTable.vue

@@ -3,9 +3,11 @@
  <BaseTable
  id="task-table"
  :columns="columnsConfig"
- :data="data"
- />
- <Pagination />
+ :data="data" />
+ <Pagination
+ :total="dataPagination.total"
+ :page="dataPagination.page"
+ :pages="dataPagination.pages" />
  </div>
 </template>
 
@@ -20,6 +22,12 @@ export default defineComponent({
  setup() {
  const data = ref(null);
  const columnsConfig = ref(null);
+ const dataPagination = ref({
+ total: 153,
+ page: 0,
+ pages: 10,
+ perPage: 15,
+ });
 
  onMounted(async () => {
  data.value = await getData();
@@ -28,6 +36,7 @@ export default defineComponent({
 
  return {
  data,
+ dataPagination,
  columnsConfig,
  };
  },

resources/jscomposition/base/form/Dropdown.vue

@@ -21,6 +21,7 @@
  <transition :name="animation">
  <div
  v-if="show"
+ ref="containerRef"
  class="tw-fixed tw-mt-1 tw-rounded-lg tw-z-10 tw-shadow-lg tw-bg-white tw-ring-1 tw-ring-inset tw-ring-gray-300"
  :style="{ width: `${widthContainer}px`, top: `${top}px` }">
  <ul class="tw-list-none tw-overflow-hidden tw-rounded">
@@ -92,6 +93,8 @@ export default defineComponent({
  emits: ["input", "change"],
  setup(props, { emit }) {
  const inputRef = ref();
+ const containerRef = ref();
+
  const show = ref(false);
  const widthContainer = ref(100);
  const top = ref(0);
@@ -121,8 +124,18 @@ export default defineComponent({
  emit("change", option);
  };
 
+ /**
+ * This method calculates the new position for dropdown menu
+ * Considers:
+ * - Space down in relation to viewport
+ *
+ * Increase other use cases
+ */
  const calculatePosition = () => {
  const rect = inputRef.value?.getBoundingClientRect();
+ const containerRect = containerRef.value.getBoundingClientRect();
+ const viewportWidth = window.innerWidth;
+ const viewportHeight = window.innerHeight;
 
  widthContainer.value = rect.width || 100;
 
@@ -137,6 +150,14 @@ export default defineComponent({
  container = container.parentElement;
  }
 
+ // Check: Does the dropdown menu have space down?
+ if (rect.top + containerRect.height > viewportHeight) {
+ topPosition = rect.top - containerRect.height;
+
+ top.value = topPosition;
+ return;
+ }
+
  top.value = inputRef.value.offsetTop - topPosition;
  };
 
@@ -145,10 +166,10 @@ export default defineComponent({
  };
 
  const toogleShow = ($event) => {
-calculatePosition($event);
+show.value = !show.value;
 
  nextTick(() => {
-show.value = !show.value;
+calculatePosition($event);
  });
  };
 
@@ -161,6 +182,7 @@ export default defineComponent({
  });
 
  return {
+ containerRef,
  show,
  data,
  inputRef,

resources/jscomposition/base/table/TCell.vue

@@ -11,8 +11,9 @@
  </slot>
  </div>
  <component
+ :is="getComponent()"
  v-else
-:is="column.cellRenderer()"
+v-bind="getParams()"
  :columns="columns"
  :column="column"
  :row="row" />
@@ -45,7 +46,14 @@ export default defineComponent({
  }
  return get(props.row, props.column?.field) || "";
  };
+
+ const getComponent = () => props.column.cellRenderer().component;
+
+ const getParams = () => props.column.cellRenderer().params || {};
+
  return {
+ getComponent,
+ getParams,
  getValue,
  };
  },

resources/jscomposition/base/table/index.js

@@ -1,5 +1,5 @@
 import BaseTable from "./BaseTable.vue";
-import Pagination from "./Pagination.vue";
+import Pagination from "../../system/table/Pagination.vue";
 import TCell from "./TCell.vue";
 import THeader from "./THeader.vue";
 import TRow from "./TRow.vue";

resources/jscomposition/base/ui/AppAvatar.vue

@@ -1,16 +1,22 @@
 <template>
- <span v-if="initials"
- class="tw-inline-flex tw-items-center tw-justify-center tw-h-6 tw-w-6 tw-rounded-full tw-bg-gray-500 tw-ring-1 tw-ring-white">
- <span class="tw-text-xs tw-font-medium tw-leading-none tw-text-white">{{ initials }}</span>
- </span>
+ <span
+ v-if="initials"
+ class="tw-inline-flex tw-items-center tw-justify-center tw-h-6 tw-w-6
+ tw-rounded-full tw-bg-gray-500 tw-ring-1 tw-ring-white"
+ @click.prevent="$emit('click')">
+ <span class="tw-text-xs tw-font-medium tw-leading-none tw-text-white">{{ initials }}</span>
+ </span>
 
- <img v-else
- class="tw-relative tw-z-30 tw-inline-block tw-h-6 tw-w-6 tw-rounded-full tw-ring-1 tw-ring-white"
- src="https://images.unsplash.com/photo-1491528323818-fdd1faba62cc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
- alt="" />
+ <img
+ v-else
+ class="tw-relative tw-z-30 tw-inline-block tw-h-6 tw-w-6 tw-rounded-full tw-ring-1 tw-ring-white"
+ src="https://images.unsplash.com/photo-1491528323818-fdd1faba62cc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
+ alt=""
+ @click.prevent="$emit('click')">
 </template>
 <script>
 import { defineComponent } from "vue";
+
 export default defineComponent({
  props: {
  src: {
@@ -22,7 +28,7 @@ export default defineComponent({
  default: () => "NA",
  },
  },
- setup(props, {emit}) {
+ setup(props, {emit}) {
  return {};
  },
 });

resources/jscomposition/base/ui/AppPopover.vue

@@ -79,22 +79,6 @@ export default {
  top = wrapperRect.bottom + 10;
  }
  break;
- case "bottom":
- top = wrapperRect.bottom + 10;
- left = wrapperRect.left + wrapperRect.width / 2 - tooltipRect.width / 2;
- // Verify space bottom
- if (top + tooltipRect.height > viewportHeight) {
- calculatedPosition.value = "top";
- top = wrapperRect.top - tooltipRect.height - 10;
- }
-
- const leftaux = wrapperRect.left - tooltipRect.width - 10;
- // Verify space left
- if (leftaux < 0) {
- calculatedPosition.value = "right-bottom";
- left = wrapperRect.right + 100;
- }
- break;
  case "left":
  top = wrapperRect.top + wrapperRect.height / 2 - tooltipRect.height / 2;
  left = wrapperRect.left - tooltipRect.width - 10;
@@ -113,6 +97,22 @@ export default {
  left = wrapperRect.left - tooltipRect.width - 10;
  }
  break;
+ case "bottom":
+ default:
+ top = wrapperRect.bottom + 10;
+ left = wrapperRect.left + wrapperRect.width / 2 - tooltipRect.width / 2;
+ // Verify space bottom
+ if (top + tooltipRect.height > viewportHeight) {
+ calculatedPosition.value = "top";
+ top = wrapperRect.top - tooltipRect.height - 10;
+ }
+
+ const leftaux = wrapperRect.left - tooltipRect.width - 10;
+ // Verify space left
+ if (leftaux < 0) {
+ calculatedPosition.value = "right-bottom";
+ left = wrapperRect.right + 100;
+ }
  }
 
  // Verify if tooltip leaves the viewport

resources/jscomposition/cases/casesDetail/components/RequestTable.vue

@@ -3,9 +3,11 @@
  <BaseTable
  id="request-table"
  :columns="columnsConfig"
- :data="data"
- />
- <Pagination />
+ :data="data" />
+ <Pagination
+ :total="dataPagination.total"
+ :page="dataPagination.page"
+ :pages="dataPagination.pages" />
  </div>
 </template>
 
@@ -20,6 +22,12 @@ export default defineComponent({
  setup() {
  const data = ref(null);
  const columnsConfig = ref(null);
+ const dataPagination = ref({
+ total: 153,
+ page: 0,
+ pages: 10,
+ perPage: 15,
+ });
 
  onMounted(async () => {
  data.value = await getData();
@@ -28,6 +36,7 @@ export default defineComponent({
 
  return {
  data,
+ dataPagination,
  columnsConfig,
  };
  },

resources/jscomposition/cases/casesDetail/components/TaskTable.vue

@@ -3,9 +3,11 @@
  <BaseTable
  id="task-table"
  :columns="columnsConfig"
- :data="data"
- />
- <Pagination />
+ :data="data" />
+ <Pagination
+ :total="dataPagination.total"
+ :page="dataPagination.page"
+ :pages="dataPagination.pages" />
  </div>
 </template>
 
@@ -20,6 +22,12 @@ export default defineComponent({
  setup() {
  const data = ref(null);
  const columnsConfig = ref(null);
+ const dataPagination = ref({
+ total: 153,
+ page: 0,
+ pages: 10,
+ perPage: 15,
+ });
 
  onMounted(async () => {
  data.value = await getData();
@@ -28,6 +36,7 @@ export default defineComponent({
 
  return {
  data,
+ dataPagination,
  columnsConfig,
  };
  },

resources/jscomposition/base/form/Dropdown.vue

@@ -21,6 +21,7 @@
  <transition :name="animation">
  <div
  v-if="show"
+ ref="containerRef"
  class="tw-fixed tw-mt-1 tw-rounded-lg tw-z-10 tw-shadow-lg tw-bg-white tw-ring-1 tw-ring-inset tw-ring-gray-300"
  :style="{ width: `${widthContainer}px`, top: `${top}px` }">
  <ul class="tw-list-none tw-overflow-hidden tw-rounded">
@@ -92,6 +93,8 @@ export default defineComponent({
  emits: ["input", "change"],
  setup(props, { emit }) {
  const inputRef = ref();
+ const containerRef = ref();
+
  const show = ref(false);
  const widthContainer = ref(100);
  const top = ref(0);
@@ -121,8 +124,18 @@ export default defineComponent({
  emit("change", option);
  };
 
+ /**
+ * This method calculates the new position for dropdown menu
+ * Considers:
+ * - Space down in relation to viewport
+ *
+ * Increase other use cases
+ */
  const calculatePosition = () => {
  const rect = inputRef.value?.getBoundingClientRect();
+ const containerRect = containerRef.value.getBoundingClientRect();
+ const viewportWidth = window.innerWidth;
+ const viewportHeight = window.innerHeight;
 
  widthContainer.value = rect.width || 100;
 
@@ -137,6 +150,14 @@ export default defineComponent({
  container = container.parentElement;
  }
 
+ // Check: Does the dropdown menu have space down?
+ if (rect.top + containerRect.height > viewportHeight) {
+ topPosition = rect.top - containerRect.height;
+
+ top.value = topPosition;
+ return;
+ }
+
  top.value = inputRef.value.offsetTop - topPosition;
  };
 
@@ -145,10 +166,10 @@ export default defineComponent({
  };
 
  const toogleShow = ($event) => {
-calculatePosition($event);
+show.value = !show.value;
 
  nextTick(() => {
-show.value = !show.value;
+calculatePosition($event);
  });
  };
 
@@ -161,6 +182,7 @@ export default defineComponent({
  });
 
  return {
+ containerRef,
  show,
  data,
  inputRef,

resources/jscomposition/base/table/TCell.vue

@@ -11,8 +11,9 @@
  </slot>
  </div>
  <component
+ :is="getComponent()"
  v-else
-:is="column.cellRenderer()"
+v-bind="getParams()"
  :columns="columns"
  :column="column"
  :row="row" />
@@ -45,7 +46,14 @@ export default defineComponent({
  }
  return get(props.row, props.column?.field) || "";
  };
+
+ const getComponent = () => props.column.cellRenderer().component;
+
+ const getParams = () => props.column.cellRenderer().params || {};
+
  return {
+ getComponent,
+ getParams,
  getValue,
  };
  },

resources/jscomposition/base/table/index.js

@@ -1,5 +1,5 @@
 import BaseTable from "./BaseTable.vue";
-import Pagination from "./Pagination.vue";
+import Pagination from "../../system/table/Pagination.vue";
 import TCell from "./TCell.vue";
 import THeader from "./THeader.vue";
 import TRow from "./TRow.vue";

resources/jscomposition/base/ui/AppAvatar.vue

@@ -1,16 +1,22 @@
 <template>
- <span v-if="initials"
- class="tw-inline-flex tw-items-center tw-justify-center tw-h-6 tw-w-6 tw-rounded-full tw-bg-gray-500 tw-ring-1 tw-ring-white">
- <span class="tw-text-xs tw-font-medium tw-leading-none tw-text-white">{{ initials }}</span>
- </span>
+ <span
+ v-if="initials"
+ class="tw-inline-flex tw-items-center tw-justify-center tw-h-6 tw-w-6
+ tw-rounded-full tw-bg-gray-500 tw-ring-1 tw-ring-white"
+ @click.prevent="$emit('click')">
+ <span class="tw-text-xs tw-font-medium tw-leading-none tw-text-white">{{ initials }}</span>
+ </span>
 
- <img v-else
- class="tw-relative tw-z-30 tw-inline-block tw-h-6 tw-w-6 tw-rounded-full tw-ring-1 tw-ring-white"
- src="https://images.unsplash.com/photo-1491528323818-fdd1faba62cc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
- alt="" />
+ <img
+ v-else
+ class="tw-relative tw-z-30 tw-inline-block tw-h-6 tw-w-6 tw-rounded-full tw-ring-1 tw-ring-white"
+ src="https://images.unsplash.com/photo-1491528323818-fdd1faba62cc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
+ alt=""
+ @click.prevent="$emit('click')">
 </template>
 <script>
 import { defineComponent } from "vue";
+
 export default defineComponent({
  props: {
  src: {
@@ -22,7 +28,7 @@ export default defineComponent({
  default: () => "NA",
  },
  },
- setup(props, {emit}) {
+ setup(props, {emit}) {
  return {};
  },
 });

resources/jscomposition/base/ui/AppPopover.vue

@@ -79,22 +79,6 @@ export default {
  top = wrapperRect.bottom + 10;
  }
  break;
- case "bottom":
- top = wrapperRect.bottom + 10;
- left = wrapperRect.left + wrapperRect.width / 2 - tooltipRect.width / 2;
- // Verify space bottom
- if (top + tooltipRect.height > viewportHeight) {
- calculatedPosition.value = "top";
- top = wrapperRect.top - tooltipRect.height - 10;
- }
-
- const leftaux = wrapperRect.left - tooltipRect.width - 10;
- // Verify space left
- if (leftaux < 0) {
- calculatedPosition.value = "right-bottom";
- left = wrapperRect.right + 100;
- }
- break;
  case "left":
  top = wrapperRect.top + wrapperRect.height / 2 - tooltipRect.height / 2;
  left = wrapperRect.left - tooltipRect.width - 10;
@@ -113,6 +97,22 @@ export default {
  left = wrapperRect.left - tooltipRect.width - 10;
  }
  break;
+ case "bottom":
+ default:
+ top = wrapperRect.bottom + 10;
+ left = wrapperRect.left + wrapperRect.width / 2 - tooltipRect.width / 2;
+ // Verify space bottom
+ if (top + tooltipRect.height > viewportHeight) {
+ calculatedPosition.value = "top";
+ top = wrapperRect.top - tooltipRect.height - 10;
+ }
+
+ const leftaux = wrapperRect.left - tooltipRect.width - 10;
+ // Verify space left
+ if (leftaux < 0) {
+ calculatedPosition.value = "right-bottom";
+ left = wrapperRect.right + 100;
+ }
  }
 
  // Verify if tooltip leaves the viewport

resources/jscomposition/cases/casesDetail/components/RequestTable.vue

@@ -3,9 +3,11 @@
  <BaseTable
  id="request-table"
  :columns="columnsConfig"
- :data="data"
- />
- <Pagination />
+ :data="data" />
+ <Pagination
+ :total="dataPagination.total"
+ :page="dataPagination.page"
+ :pages="dataPagination.pages" />
  </div>
 </template>
 
@@ -20,6 +22,12 @@ export default defineComponent({
  setup() {
  const data = ref(null);
  const columnsConfig = ref(null);
+ const dataPagination = ref({
+ total: 153,
+ page: 0,
+ pages: 10,
+ perPage: 15,
+ });
 
  onMounted(async () => {
  data.value = await getData();
@@ -28,6 +36,7 @@ export default defineComponent({
 
  return {
  data,
+ dataPagination,
  columnsConfig,
  };
  },

resources/jscomposition/cases/casesDetail/components/TaskTable.vue

@@ -3,9 +3,11 @@
  <BaseTable
  id="task-table"
  :columns="columnsConfig"
- :data="data"
- />
- <Pagination />
+ :data="data" />
+ <Pagination
+ :total="dataPagination.total"
+ :page="dataPagination.page"
+ :pages="dataPagination.pages" />
  </div>
 </template>
 
@@ -20,6 +22,12 @@ export default defineComponent({
  setup() {
  const data = ref(null);
  const columnsConfig = ref(null);
+ const dataPagination = ref({
+ total: 153,
+ page: 0,
+ pages: 10,
+ perPage: 15,
+ });
 
  onMounted(async () => {
  data.value = await getData();
@@ -28,6 +36,7 @@ export default defineComponent({
 
  return {
  data,
+ dataPagination,
  columnsConfig,
  };
  },