@policystudio/policy-studio-ui-vue 1.0.73 → 1.0.74

package/dist/css/psui_styles.css

@@ -18527,6 +18527,13 @@ html {
         font-size: 24px;
       }
 
+.psui-el-table-results-wrapper {
+  width: 100%;
+  white-space: nowrap;
+  display: flex;
+  overflow: auto;
+}
+
 .psui-el-table-results {
   position: relative;
   vertical-align: top;
@@ -18620,6 +18627,13 @@ html {
       border-color: rgba(230, 236, 242, var(--border-opacity));
     }
 
+.psui-el-table-results tbody tr.is-first .title {
+          font-weight: 700;
+          --text-opacity: 1;
+          color: #28323B;
+          color: rgba(40, 50, 59, var(--text-opacity));
+        }
+
 .psui-el-table-results tbody tr td {
         padding-left: 2rem;
         --text-opacity: 1;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@policystudio/policy-studio-ui-vue",
-  "version": "1.0.73",
+  "version": "1.0.74",
   "description": "Policy Studio UI",
   "main": "src/index.js",
   "author": "Policy Studio Team",

package/src/assets/scss/components/PsTableResults.scss

@@ -1,4 +1,7 @@
 @layer components{
+  .psui-el-table-results-wrapper {
+    @apply .psui-w-full .psui-whitespace-no-wrap .psui-flex .psui-overflow-auto;
+  }
 
   .psui-el-table-results {
     @apply .psui-relative .psui-align-top .psui-w-full .psui-max-w-full .psui-text-p;
@@ -57,6 +60,12 @@
       tr {
         @apply .psui-border-b .psui-border-gray-20;
 
+        &.is-first {
+          .title {
+            @apply .psui-font-bold .psui-text-gray-80;
+          }
+        }
+
         td {
           @apply .psui-pl-8 .psui-text-gray-80 .psui-h-10 .psui-text-right .psui-text-small;
           padding-top: 11px;

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="psui-w-full psui-whitespace-no-wrap psui-flex psui-overflow-auto">
+  <div class="psui-el-table-results-wrapper">
     <table 
       ref="table"
       class="psui-el-table-results"
@@ -14,9 +14,8 @@
           :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-first' : item.deep == 0,
+              'psui-hidden' : checkRowIsCollapsed(item),
               'is-last' : item.is_last
             },
             `type-${item.type}`
@@ -29,14 +28,14 @@
               :style="{ paddingLeft: `${item.deep * 20}px` }"
             >
               <PsIcon
-                v-if="item.deep > 0 && !item.last_deep || item.type === 'total'" 
+                v-if="!item.last_deep || item.type === 'total'" 
                 icon="expand_more"
                 size="24"
                 class="psui-cursor-pointer psui-transform psui-transition"
                 :icon-classes="getIconClasses(item)"
                 :style="{ display: 'flex' }"
-                :class="checkItemIsVisible(item) ? 'psui-rotate-0' : 'psui--rotate-90'"
-                @click.native="$emit('collapse-row', item)"
+                :class="checkRowIsVisible(item) ? 'psui-rotate-0' : 'psui--rotate-90'"
+                @click.native="onCollapse(item)"
               />
               <PsRichTooltip 
                 v-if="item.is_disabled"
@@ -48,7 +47,16 @@
                   <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">
+                  <p
+                    v-if="item.disabled_text"
+                    class="psui-font-bold psui-text-gray-80 psui-text-xsmall"
+                  >
+                    {{ item.disabled_text }}
+                  </p>
+                  <p
+                    v-else
+                    class="psui-font-bold psui-text-gray-80 psui-text-xsmall"
+                  >
                     {{ item.title }} buildings are <br>not allowed.
                   </p>
                 </template>
@@ -81,19 +89,30 @@
                   @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-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>
+                <p v-else>
+                  {{ item.data[column.key] }}
+                </p>
+
+                <PsProgressBar
+                  v-if="column.isChart && formatFunction"
+                  :value="formatFunction(column.key, item.data[column.key], item.data) == '--' ? 0 : item.data[column.key]"
+                  :force-break-even="item.is_disabled || formatFunction(column.key, item.data[column.key], item.data) === '--' ? true : false"
+                />
 
                 <PsProgressBar
-                  v-if="column.isChart"
-                  :value="!item.is_disabled ? item.data[column.key] : 0"
-                  :force-break-even="item.is_disabled ? true : false"
+                  v-else-if="column.isChart"
+                  :value="item.data[column.key] == '--' ? 0 : item.data[column.key]"
+                  :force-break-even="item.is_disabled || item.data[column.key] === '--' ? true : false"
                 />
               </div>
             </td>
@@ -110,10 +129,18 @@
 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 if the lines should start collapsed.
+    */
+    showRowsCollapsed: {
+      type: Boolean,
+      default: true
+    },
     /**
     * It sets the format function to display values.
     */
@@ -121,6 +148,12 @@ export default {
       type: Function
     },
     /**
+    * It sets the format function to display values.
+    */
+    disabledText: {
+      type: String
+    },
+    /**
     * It sets the hidden items.
     */
     hiddenItems: {
@@ -133,10 +166,8 @@ export default {
     * It sets the hidden items index.
     */
     itemsHiddenIndexes: {
-      type: Array,
-      default() {
-        return []
-      }
+      type: [Array, undefined],
+      default: undefined
     },
     /**
     * It sets the values which will be use to render the body.
@@ -165,27 +196,15 @@ export 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'
-    },
   },
+  data: () => ({
+    collapsedRows : []
+  }),
   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++) {
@@ -193,11 +212,45 @@ export default {
         this.addRow(item, 0, `${index}`, rows)
       }
       return rows
+    },
+  },
+  watch: {
+    getRows: {
+      deep: true,
+      immediate: true,
+      handler: function () {
+        this.setCollapsedRows()
+      }
+    },
+    itemsHiddenIndexes() {
+      this.setCollapsedRows()
+    },
+    showRowsCollapsed() {
+      this.setCollapsedRows()
     }
   },
+  mounted () {
+    this.setCollapsedRows()
+  },
   methods: {
+    setCollapsedRows() {
+      if ( this.itemsHiddenIndexes ) {
+        this.collapsedRows = [...this.itemsHiddenIndexes] 
+        return
+      }
+
+      const newRowsCollpased = []
+      if ( this.showRowsCollapsed ) {
+        this.getRows.forEach(element => {
+          if ( element?.items?.length ) {
+            newRowsCollpased.push(element.index)
+          }
+        })
+      }
+      this.collapsedRows = newRowsCollpased
+    },
     getIconClasses(item) {
-      return this.checkItemIsVisible(item) ? 'psui-text-gray-40' : 'psui-text-blue-60'
+      return this.checkRowIsVisible(item) ? 'psui-text-gray-40' : 'psui-text-blue-60'
     },
     addRow(item, deep = 0, index, rows) {
       item.deep = deep
@@ -213,13 +266,13 @@ export default {
         }
       }
     },
-    checkItemIsVisible(item) {
-      return this.hiddenItems.indexOf(item) < 0
+    checkRowIsVisible(item) {
+      return this.collapsedRows.indexOf(item.index) < 0
     },
-    checkIndexIsHidden(item) {
+    checkRowIsCollapsed(item) {
       let isHidden = false
-      for (let index = 0; index < this.itemsHiddenIndexes.length; index++) {
-        const item_hidden = this.itemsHiddenIndexes[index]
+      for (let index = 0; index < this.collapsedRows.length; index++) {
+        const item_hidden = this.collapsedRows[index]
         if (item.index.startsWith(`${item_hidden}-`)) {
           isHidden = true
           break
@@ -228,21 +281,15 @@ export default {
       return isHidden
     },
     onCollapse(item) {
-      const index = this.itemsHiddenIndexes.indexOf(item)
+      const index = this.collapsedRows.indexOf(item.index)
       if(index > -1) {
-        this.itemsHiddenIndexes.splice(index, 1)
+        this.collapsedRows.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)
-      if (Number(data) === 0 || data === '--') {
-        return this.item.data[columnKey]
+        this.collapsedRows.push(item.index)
       }
-      return 1
-    },
+      this.$forceUpdate()
+      this.$emit('collapse-row', item)
+    }
   }
 }
 </script>