@policystudio/policy-studio-ui-vue 1.0.68 → 1.0.70

package/src/components/table-results/PsTableResults.vue

@@ -0,0 +1,247 @@
+<template>
+  <div class="psui-w-full psui-whitespace-no-wrap psui-flex psui-overflow-auto">
+    <table 
+      ref="table"
+      class="psui-el-table-results"
+    >
+      <slot name="header"></slot>
+
+      <!-- <slot name="body"></slot> -->
+
+      <tbody>
+        <tr
+          v-for="(item, index) in getRows"
+          :key="index"
+          :class="[
+            {
+              'psui-font-bold psui-text-gray-80' : item.type == 'total',
+              'psui-hidden' : checkIndexIsHidden(item),
+              'cell-pb-20 psui-text-red-70' : item.type == 'vintage' && !checkItemIsVisible(item) || item.type == 'study_data' && item.is_last,
+              'is-last' : item.is_last
+            },
+            `type-${item.type}`
+          ]"
+        >
+          <td>
+            <div 
+              class="actions psui-space-x-3"
+              :class="{ 'psui-ml-8' : item.type == 'study_data' }"
+              :style="{ paddingLeft: `${item.deep * 20}px` }"
+            >
+              <PsIcon
+                v-if="item.deep > 0 && !item.last_deep || item.type === 'total'" 
+                icon="expand_more"
+                size="24"
+                class="psui-cursor-pointer psui-transform psui-transition"
+                icon-classes="psui-text-gray-40 psui-leading-none"
+                :style="{ display: 'flex' }"
+                :class="checkItemIsVisible(item) ? 'psui-rotate-0' : 'psui--rotate-90'"
+                @click.native="$emit('collapse-row', item)"
+              />
+              <PsRichTooltip 
+                v-if="item.is_disabled"
+                layout="gray"
+                position="top"
+                class="psui-inline-flex psui-cursor-default"
+              >
+                <template v-slot:trigger>
+                  <p class="title psui-text-gray-50">{{ item.title }}</p>
+                </template>
+                <template v-slot:content>
+                  <p class="psui-font-bold psui-text-gray-80 psui-text-xsmall">
+                    {{ item.title }} buildings are <br>not allowed.
+                  </p>
+                </template>
+              </PsRichTooltip>
+              <p
+                v-else
+                class="title"
+                :class="{ 'psui-font-bold' : item.type == 'total' }"
+              >
+                {{ item.title }}
+              </p>
+            </div>
+          </td>
+
+          <template 
+            v-for="(columnGroup, indexColumn) of columnGroups"
+          >
+            <td
+              v-for="column of columnGroup.columns"
+              :key="indexColumn + '-' + columnGroup.key + '-' + column.key"
+            >
+              <div class="psui-space-x-2 psui-show-childrens-on-hover">
+                <PsIcon
+                  v-if="column.hasProjections && !item.is_disabled"
+                  icon="bar_chart"
+                  size="16"
+                  class="psui-cursor-pointer"
+                  icon-classes="psui-text-blue-60 psui-opacity-0 psui-leading-none psui-transition"
+                  :style="{ display: 'flex' }"
+                  @click.native="$emit('policy-selected', { item, column })"
+                />
+
+                <p v-if="formatFunction && !item.is_disabled">{{ formatFunction(column.key, item.data[column.key], item.data) }}</p>
+                <p 
+                  v-else-if="item.is_disabled"
+                  class="psui-text-gray-50"
+                >
+                  --
+                </p>
+                <p v-else>{{ item.data[column.key] }}</p>
+
+                <PsProgressBar
+                  v-if="column.isChart"
+                  :value="!item.is_disabled ? item.data[column.key] : 0"
+                  :force-break-even="item.is_disabled ? true : false"
+                />
+              </div>
+            </td>
+          </template>
+        </tr>
+      </tbody>
+
+      <!-- <slot name="footer"></slot> -->
+    </table>
+  </div>
+</template>
+
+<script>
+import PsRichTooltip from '../tooltip/PsRichTooltip.vue'
+import PsIcon from '../ui/PsIcon.vue'
+import PsProgressBar from '../badges-and-tags/PsProgressBar.vue'
+export default {
+  name: 'PsTableResults',
+  components: { PsProgressBar, PsIcon, PsRichTooltip },
+  props: {
+    /**
+    * It sets the format function to display values.
+    */
+    formatFunction: {
+      type: Function
+    },
+    /**
+    * It sets the hidden items.
+    */
+    hiddenItems: {
+      type: Array,
+      default() {
+        return []
+      }
+    },
+    /**
+    * It sets the hidden items index.
+    */
+    itemsHiddenIndexes: {
+      type: Array,
+      default() {
+        return []
+      }
+    },
+    /**
+    * It sets the values which will be use to render the body.
+    */
+    summaryData: {
+      type: Array,
+      default() {
+        return []
+      }
+    },
+    /**
+    * It sets the values which will be use to render the body.
+    */
+    columnGroups: {
+      type: Array,
+      default() {
+        return []
+      }
+    },
+    /**
+    * It sets the values which will be use to render the body.
+    */
+    rows: {
+      type: Array,
+      default() {
+        return []
+      }
+    },
+    /**
+     * It sets a close button if needed.
+     */
+    isCollapsible: {
+      type: Boolean,
+      default: true
+    },
+    /**
+    * It sets additional styling if needed.
+    */
+    cssStyle: {
+      type: String,
+      default: 'psui-text-gray-60'
+    },
+  },
+  computed: {
+    cssAlign() {
+      if (this.align === 'right') return `psui-text-right ${this.cssStyle}`
+      if (this.align === 'center') return `psui-text-center  ${this.cssStyle}`
+      return `psui-text-left ${this.cssStyle}`
+    },
+    getRows() {
+      const rows = []
+      for (let index = 0; index < this.summaryData.length; index++) {
+        const item = this.summaryData[index]
+        this.addRow(item, 0, `${index}`, rows)
+      }
+      return rows
+    }
+  },
+  methods: {
+    addRow(item, deep = 0, index, rows) {
+      item.deep = deep
+      item.index = index
+      rows.push(item)
+      item.last_deep = item.items ? false : true
+      if (item.items) {
+        const items_child = [...item.items]
+        for (let indexChild = 0; indexChild < items_child.length; indexChild++) {
+          const item_child = items_child[indexChild]
+          item_child.is_last = indexChild + 1 === items_child.length ? true : false
+          this.addRow(item_child, deep + 1, `${index}-${indexChild}`, rows)					
+        }
+      }
+    },
+    checkItemIsVisible(item) {
+      return this.hiddenItems.indexOf(item) < 0
+    },
+    checkIndexIsHidden(item) {
+      let isHidden = false
+      for (let index = 0; index < this.itemsHiddenIndexes.length; index++) {
+        const item_hidden = this.itemsHiddenIndexes[index]
+        if (item.index.startsWith(`${item_hidden}-`)) {
+          isHidden = true
+          break
+        }
+      }
+      return isHidden
+    },
+    onCollapse(item) {
+      const index = this.itemsHiddenIndexes.indexOf(item)
+      if(index > -1) {
+        this.itemsHiddenIndexes.splice(index, 1)
+      } else {
+        this.itemsHiddenIndexes.push(item)
+      }
+      this.$emit('click')
+    },
+    progressBarBreakEven(columnKey) {
+      const data = this.formatFunction(columnKey, this.item.data[columnKey], this.item.data)
+      console.log('data:', data)
+      if (Number(data) === 0 || data === '--') {
+        return this.item.data[columnKey]
+      }
+      return 1
+    },
+  }
+}
+</script>
+<style> /* Please, use the file src/assets/scss/components/PsTableResults.scss */ </style>

package/src/components/table-results/PsTableResultsBody.vue

@@ -0,0 +1,98 @@
+<template>
+  <tbody>
+    <tr
+      v-for="(row, index) in getRows"
+      :key="index"
+    >
+      <td>
+        <p class="title">{{ row.title }}</p>
+      </td>
+
+      <template 
+        v-for="(columnGroup, indexColumn) of columnGroups"
+      >
+        <td
+          v-for="column of columnGroup.columns"
+          :key="indexColumn + '-' + columnGroup.key + '-' + column.key"
+        >
+          <!-- <pre>{{ column }}</pre> -->
+          <p>{{ column.title }}</p>
+        </td>
+      </template>
+    </tr>
+  </tbody>
+</template>
+
+<script>
+export default {
+  name: 'PsTableResultsBody',
+  props: {
+    /**
+    * It sets the values which will be use to render the body.
+    */
+    summaryData: {
+      type: Array,
+      default() {
+        return []
+      }
+    },
+    /**
+    * It sets the values which will be use to render the body.
+    */
+    columnGroups: {
+      type: Array,
+      default() {
+        return []
+      }
+    },
+    /**
+    * It sets the values which will be use to render the body.
+    */
+    rows: {
+      type: Array,
+      default() {
+        return []
+      }
+    },
+    /**
+    * It sets additional styling if needed.
+    */
+    cssStyle: {
+      type: String,
+      default: 'psui-text-gray-60'
+    }
+  },
+  computed: {
+    cssAlign() {
+      if (this.align === 'right') return `psui-text-right ${this.cssStyle}`
+      if (this.align === 'center') return `psui-text-center  ${this.cssStyle}`
+      return `psui-text-left ${this.cssStyle}`
+    },
+    getRows() {
+      const rows = []
+      for (let index = 0; index < this.summaryData.length; index++) {
+        const item = this.summaryData[index]
+        this.addRow(item, 0, `${index}`, rows)
+      }
+      return rows
+    }
+  },
+  methods: {
+    addRow(item, deep = 0, index, rows) {
+      item.deep = deep
+      item.index = index
+      rows.push(item)
+      item.last_deep = item.items ? false : true
+      if (item.items) {
+        const items_child = [...item.items]
+        for (let indexChild = 0; indexChild < items_child.length; indexChild++) {
+          const item_child = items_child[indexChild]
+          item_child.is_last = indexChild + 1 === items_child.length ? true : false
+          this.addRow(item_child, deep + 1, `${index}-${indexChild}`, rows)					
+        }
+      }
+    }
+  }
+}
+</script>
+<style> /* Please, use the file src/assets/scss/components/PsTableResults.scss */ </style>

package/src/components/table-results/PsTableResultsHead.vue

@@ -0,0 +1,109 @@
+<template>
+  <thead>
+    <tr>
+      <th>
+        <div>
+          <p class="title">Measures & Packages</p>
+        </div>
+      </th>
+      
+      <th
+        v-for="columnGroup of header"
+        :key="columnGroup.key"
+        :colspan="columnGroup.columns.reduce( (prev, cur) => cur.isActive ? prev + 1 : prev, 0 )"
+      >
+        <div class="psui-space-x-1 psui-items-center psui-show-childrens-on-hover">
+          <p class="title">{{ columnGroup.title }}</p>
+          <PsIcon
+            icon="info"
+            size="18"
+            class="psui-cursor-pointer"
+            icon-classes="psui-text-blue-50 psui-opacity-0 psui-leading-none psui-transition"
+            :style="{ display: 'flex' }"
+            @click.native="$emit('click-column-group-helper', columnGroup, $event)"
+          />
+        </div>
+      </th>
+    </tr>
+
+    <tr>
+      <th>
+        <div>
+          <p class="description">Select the measures you want to combine <br />to create your policy.</p>
+        </div>
+      </th>
+
+      <template v-for="columnGroup of header">
+        <th 
+          v-for="column of columnGroup.columns" 
+          :key="`${columnGroup.key}-${column.key}`" 
+        >
+          <div class="psui-flex psui-flex-col">
+            <div class="psui-flex psui-flex-row psui-space-x-1 psui-items-center psui-justify-end psui-show-childrens-on-hover psui-mb-px">
+              <PsIcon
+                v-if="showOrder"
+                :icon="orderDirection == 'asc' ? 'arrow_downward' : 'arrow_upward'"
+                :type="orderDirection == 'asc' ? 'arrow_upward' : 'arrow_upward'"
+                size="16"
+                class="psui-cursor-pointer"
+                icon-classes="psui-text-blue-50 psui-opacity-0 psui-leading-none psui-transition"
+                :style="{ display: 'flex' }"
+                @click.native="$emit('click-order-column', column)" 
+              />
+
+              <PsIcon
+                icon="info"
+                size="16"
+                class="psui-cursor-pointer"
+                icon-classes="psui-text-blue-50 psui-opacity-0 psui-leading-none psui-transition"
+                :style="{ display: 'flex' }"
+                @click.native="$emit('click-column-helper', column, $event)"
+              />
+              <p class="title" v-if="column.title">{{ column.title }}</p>
+            </div>
+            <p class="description" v-if="column.description">{{ column.description }}</p>
+          </div>
+        </th>
+      </template>
+    </tr>
+  </thead>
+</template>
+
+<script>
+import PsIcon from '../ui/PsIcon.vue'
+export default {
+  name: 'PsTableResultsHead',
+  components: { PsIcon },
+  props: {
+    /**
+    * It sets the values which will be use to render the header.
+    */
+    header: {
+      type: Array,
+      required: true,
+      default: () => {
+        return []
+      },
+    },
+    /**
+    * this sets whether sorting will be displayed.
+    */
+    showOrder: {
+      type: Boolean,
+      default: false
+    }
+  },
+  computed: {
+    columnsSelectedForStudy() {
+      return this.$parent.columnsSelectedForStudy
+    },
+    orderColumn() {
+      return this.$parent.orderColumn
+    },
+    orderDirection() {
+      return this.$parent.orderDirection
+    },
+  }
+}
+</script>
+<style> /* Please, use the file src/assets/scss/components/PsTableResults.scss */ </style>

package/src/components/table-results/PsTableResultsRow.vue

@@ -0,0 +1,86 @@
+<template>
+  <tbody>
+    <tr
+      v-for="(row, index) in getRows"
+      :key="index"
+    >
+      <td>
+        <p class="title">{{ row.title }}</p>
+      </td>
+
+      <template 
+        v-for="(columnGroup, indexColumn) of columnGroups"
+      >
+        <td
+          v-for="column of columnGroup.columns"
+          :key="indexColumn + '-' + columnGroup.key + '-' + column.key"
+        >
+          <!-- <pre>{{ column }}</pre> -->
+          <p>{{ row.data[column.key] }}</p>
+        </td>
+      </template>
+    </tr>
+  </tbody>
+</template>
+
+<script>
+export default {
+  name: 'PsTableResultsRow',
+  props: {
+    /**
+    * It sets the values which will be use to render the body.
+    */
+    summaryData: {
+      type: Array,
+      default() {
+        return []
+      }
+    },
+    /**
+    * It sets the values which will be use to render the body.
+    */
+    columnGroups: {
+      type: Array,
+      default() {
+        return []
+      }
+    },
+    /**
+    * It sets the values which will be use to render the body.
+    */
+    rows: {
+      type: Array,
+      default() {
+        return []
+      }
+    },
+  },
+  computed: {
+    getRows() {
+      const rows = []
+      for (let index = 0; index < this.summaryData.length; index++) {
+        const item = this.summaryData[index]
+        this.addRow(item, 0, `${index}`, rows)
+      }
+      return rows
+    }
+  },
+  methods: {
+    addRow(item, deep = 0, index, rows) {
+      item.deep = deep
+      item.index = index
+      rows.push(item)
+      item.last_deep = item.items ? false : true
+      if (item.items) {
+        const items_child = [...item.items]
+        for (let indexChild = 0; indexChild < items_child.length; indexChild++) {
+          const item_child = items_child[indexChild]
+          item_child.is_last = indexChild + 1 === items_child.length ? true : false
+          this.addRow(item_child, deep + 1, `${index}-${indexChild}`, rows)					
+        }
+      }
+    }
+  }
+}
+</script>
+<style> /* Please, use the file src/assets/scss/components/PsTableResults.scss */ </style>

package/src/index.js

@@ -17,6 +17,9 @@ import PsAccordionItem from './components/accordion/PsAccordionItem.vue'
 import PsChips from './components/chips/PsChips.vue'
 import PsDataTable from './components/datatable/PsDataTable.vue'
 import PsDataTableItem from './components/datatable/PsDataTableItem.vue'
+import PsTableResults from './components/table-results/PsTableResults.vue'
+import PsTableResultsHead from './components/table-results/PsTableResultsHead.vue'
+import PsTableResultsBody from './components/table-results/PsTableResultsBody.vue'
 import PsIcon from './components/ui/PsIcon.vue'
 import PsDotLoader from './components/ui/PsDotLoader.vue'
 import PsTooltip from './components/tooltip/PsTooltip.vue'
@@ -30,6 +33,7 @@ import PsScrollBar from './components/playground/PsScrollBar.vue'
 import PsMiniTag from './components/badges-and-tags/PsMiniTag.vue'
 import PsCheckboxSimple from './components/controls/PsCheckboxSimple.vue'
 import PsBadgeWithIcon from './components/badges-and-tags/PsBadgeWithIcon.vue'
+import PsProgressBar from './components/badges-and-tags/PsProgressBar.vue'
 import PsRadioButtonSimple from './components/controls/PsRadioButtonSimple.vue'
 
 
@@ -51,6 +55,9 @@ export default {
     Vue.component('PsChips', PsChips)
     Vue.component('PsDataTable', PsDataTable)
     Vue.component('PsDataTableItem', PsDataTableItem)
+    Vue.component('PsTableResults', PsTableResults)
+    Vue.component('PsTableResultsHead', PsTableResultsHead)
+    Vue.component('PsTableResultsBody', PsTableResultsBody)
     Vue.component('PsIcon', PsIcon)
     Vue.component('PsDotLoader', PsDotLoader)
     Vue.component('PsTooltip', PsTooltip)
@@ -68,6 +75,7 @@ export default {
     Vue.component('PsMiniTag', PsMiniTag)
     Vue.component('PsCheckboxSimple', PsCheckboxSimple)
     Vue.component('PsBadgeWithIcon', PsBadgeWithIcon)
+    Vue.component('PsProgressBar', PsProgressBar)
     Vue.component('PsRadioButtonSimple', PsRadioButtonSimple)
     
     Vue.directive('click-outside', {
@@ -104,6 +112,9 @@ export {
   PsChips,
   PsDataTable,
   PsDataTableItem,
+  PsTableResults,
+  PsTableResultsHead,
+  PsTableResultsBody,
   PsIcon,
   PsDotLoader,
   PsTooltip,
@@ -121,6 +132,7 @@ export {
   PsMiniTag,
   PsCheckboxSimple,
   PsBadgeWithIcon,
+  PsProgressBar,
   PsRadioButtonSimple
 }
 

package/src/stories/Draggable.stories.js

@@ -12,7 +12,7 @@ const Template = (args, {argTypes}) => ({
     <div style='width: 300px; font-family: "Lato", sans-serif; font-size: 12px;'>
         <PsDraggable v-bind='$props'/>
     </div>
-        `
+  `
 })
 
 export const Component = Template.bind({})