Merge pull request #87 from arnaugiralt/feat/LITE-28299-create-deploy…

…ment-request-dialog LITE-28299: create deployment request dialog
cloudblue · Sep 6, 2023 · fa641a8 · fa641a8
2 parents 7dc27c9 + b08874d
commit fa641a8
Show file tree

Hide file tree

Showing 22 changed files with 3,826 additions and 1,035 deletions.
diff --git a/...eployment-details.762bdc77ba188478a878.js → ...eployment-details.74b7244a090b39702a09.js b/...eployment-details.762bdc77ba188478a878.js → ...eployment-details.74b7244a090b39702a09.js
diff --git a/connect_ext_ppr/static/deployment-details.css b/connect_ext_ppr/static/deployment-details.css
diff --git a/..._ppr/static/index.b6eb29f46e003ae8f9a4.js → ..._ppr/static/index.4e92fe096c8c41ecf7ea.js b/..._ppr/static/index.b6eb29f46e003ae8f9a4.js → ..._ppr/static/index.4e92fe096c8c41ecf7ea.js
diff --git a/...ppr/static/index.5c5477c3e81eb95e1456.css → ...ppr/static/index.7f54bf0dcbb9dc626487.css b/...ppr/static/index.5c5477c3e81eb95e1456.css → ...ppr/static/index.7f54bf0dcbb9dc626487.css
diff --git a/connect_ext_ppr/static/index.html b/connect_ext_ppr/static/index.html
@@ -12,7 +12,7 @@
     <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap" rel="stylesheet">
     <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
     <title>Index</title>
-<script defer src="vendors.179057bad5fafaf6a016.js"></script><script defer src="index.b6eb29f46e003ae8f9a4.js"></script><link href="index.5c5477c3e81eb95e1456.css" rel="stylesheet"></head>
+<script defer src="vendors.3c43b45d3e9e7cbf9863.js"></script><script defer src="index.4e92fe096c8c41ecf7ea.js"></script><link href="index.7f54bf0dcbb9dc626487.css" rel="stylesheet"></head>
 
 <body>
     <div id="app"></div>

diff --git a/connect_ext_ppr/static/settings.html b/connect_ext_ppr/static/settings.html
@@ -11,7 +11,7 @@
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap" rel="stylesheet">
     <title>Settings</title>
-<script defer src="vendors.179057bad5fafaf6a016.js"></script><script defer src="settings.bd5ea671e480c7aabff3.js"></script><link href="settings.228c534170f31239141d.css" rel="stylesheet"></head>
+<script defer src="vendors.3c43b45d3e9e7cbf9863.js"></script><script defer src="settings.bd5ea671e480c7aabff3.js"></script><link href="settings.228c534170f31239141d.css" rel="stylesheet"></head>
 
 <body>
     <div id="loader"></div>

diff --git a/...pr/static/vendors.179057bad5fafaf6a016.js → ...pr/static/vendors.3c43b45d3e9e7cbf9863.js b/...pr/static/vendors.179057bad5fafaf6a016.js → ...pr/static/vendors.3c43b45d3e9e7cbf9863.js
diff --git a/ui/src/components/CheckboxTable.vue b/ui/src/components/CheckboxTable.vue
@@ -0,0 +1,158 @@
+<template lang="pug">
+.checkbox-table
+  p.checkbox-table__title {{ title }}
+
+  c-search.checkbox-table__search(v-model="localSearch")
+
+  c-data-table.checkbox-table__table(
+    :value="computedItems",
+    :headers="processedHeaders",
+    :prepare-row="prepareRow",
+    :updating="loading",
+    hide-all-pagination-sections,
+    fix-layout,
+  )
+    template(#items="{ item, row, visibleHeaders }")
+      tr.table__row.hoverable
+        template(v-if="item.type === 'all'")
+          td(
+            v-for="(header, index) in visibleHeaders"
+            :key="header.value",
+          )
+            span(v-if="index === 0") All
+            c-checkbox(
+              v-if="header.value === 'radio'"
+              v-model="localIsAllSelected",
+            )
+
+        template(v-else)
+          td(
+            v-for="header in visibleHeaders"
+            :key="header.value",
+          )
+            c-checkbox(
+              v-if="header.value === 'radio'"
+              :value="localValue.includes(row[valueProp])",
+              @input="toggleSelected(row[valueProp])",
+            )
+            slot(
+              v-else,
+              :name="header.value",
+              :row="row",
+            )
+
+</template>
+
+<script>
+import cDataTable from '~components/cDataTable.vue';
+import cCheckbox from '~components/cCheckbox.vue';
+import cSearch from '~components/cSearch.vue';
+
+import sync from '~mixins/sync';
+
+
+export default {
+  mixins: [sync([
+    { prop: 'value', local: 'localValue' },
+    { prop: 'search', local: 'localSearch' },
+    { prop: 'isAllSelected', local: 'localIsAllSelected' },
+  ])],
+
+  components: {
+    cDataTable,
+    cCheckbox,
+    cSearch,
+  },
+
+  props: {
+    value: {
+      type: Array,
+      default: () => [],
+    },
+
+    valueProp: {
+      type: String,
+      default: 'id',
+    },
+
+    loading: Boolean,
+    title: String,
+    prepareRow: Function,
+    headers: {
+      type: Array,
+      required: true,
+    },
+
+    includeAll: Boolean,
+    isAllSelected: Boolean,
+    items: {
+      type: Array,
+      default: () => [],
+    },
+
+    search: String,
+  },
+
+  data: () => ({
+    localValue: [],
+    localSearch: '',
+    localIsAllSelected: false,
+  }),
+
+  computed: {
+    processedHeaders: ({ headers }) => [
+      ...headers,
+      {
+        notResizable: true,
+        text: '',
+        value: 'radio',
+        width: 80,
+      },
+    ],
+
+    computedItems: ({ items, includeAll }) => {
+      if (includeAll) return [{ type: 'all' }, ...items];
+
+      return items;
+    },
+  },
+
+  methods: {
+    toggleSelected(value) {
+      const index = this.localValue.indexOf(value);
+
+      if (index > -1) {
+        this.localValue.splice(index, 1);
+      } else {
+        this.localValue.push(value);
+      }
+    },
+  },
+
+  watch: {
+    isAllSelected(v) {
+      if (v) {
+        this.localValue = this.items.map(item => item[this.valueProp]);
+      } else {
+        this.localValue = [];
+      }
+    },
+  },
+};
+
+</script>
+
+<style lang="stylus" scoped>
+.checkbox-table {
+  &__title {
+    font-size: 18px;
+    font-weight: 500;
+    line-height: 24px;
+    margin-bottom: 24px;
+  }
+
+  &__search {
+    margin-bottom: 12px;
+  }
+}
+</style>