Merge pull request #2048 from sanger/revert-2046-revert-2008-y24-022-…

…ui-submit-pool-xp-tube-to-traction

Revert "Revert "Y24-022 UI Submit Pool XP tube to traction""

app/frontend/entrypoints/application.js

@@ -63,6 +63,7 @@ import '@/javascript/multi-stamp/index.js'
 import '@/javascript/qc-information/index.js'
 import '@/javascript/tubes-to-rack/index.js'
 import '@/javascript/validate-paired-tubes/index.js'
+import '@/javascript/pool-xp-tube-panel/index.js'
 
 // Load simple javascript files
 import '@/javascript/plain-javascript/page-reloader.js'

app/frontend/javascript/icons/ErrorIcon.vue

@@ -0,0 +1,19 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24" :fill="color" :stroke="color">
+    <path
+      d="M480-280q17 0 28.5-11.5T520-320q0-17-11.5-28.5T480-360q-17 0-28.5 11.5T440-320q0 17 11.5 28.5T480-280Zm-40-160h80v-240h-80v240Zm40 360q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z"
+    />
+  </svg>
+</template>
+
+<script>
+export default {
+  name: 'ErrorIcon',
+  props: {
+    color: {
+      type: String,
+      default: 'currentColor',
+    },
+  },
+}
+</script>

app/frontend/javascript/icons/ReadyIcon.vue

@@ -0,0 +1,19 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24" :fill="color" :stroke="color">
+    <path
+      d="M480-360q50 0 85-35t35-85q0-50-35-85t-85-35q-50 0-85 35t-35 85q0 50 35 85t85 35Zm0 280q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z"
+    />
+  </svg>
+</template>
+
+<script>
+export default {
+  name: 'ReadyIcon',
+  props: {
+    color: {
+      type: String,
+      default: 'currentColor',
+    },
+  },
+}
+</script>

app/frontend/javascript/icons/SuccessIcon.vue

@@ -0,0 +1,19 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24" :fill="color" :stroke="color">
+    <path
+      d="m424-296 282-282-56-56-226 226-114-114-56 56 170 170Zm56 216q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z"
+    />
+  </svg>
+</template>
+
+<script>
+export default {
+  name: 'SuccessIcon',
+  props: {
+    color: {
+      type: String,
+      default: 'currentColor',
+    },
+  },
+}
+</script>

app/frontend/javascript/icons/TubeIcon.vue

@@ -0,0 +1,19 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#5f6368">
+    <path
+      d="M480-80q-83 0-141.5-58.5T280-280v-360q-33 0-56.5-23.5T200-720v-80q0-33 23.5-56.5T280-880h400q33 0 56.5 23.5T760-800v80q0 33-23.5 56.5T680-640v360q0 83-58.5 141.5T480-80ZM280-720h400v-80H280v80Zm200 560q50 0 85-35t35-85H480v-80h120v-80H480v-80h120v-120H360v360q0 50 35 85t85 35ZM280-720v-80 80Z"
+    />
+  </svg>
+</template>
+
+<script>
+export default {
+  name: 'ErrorIcon',
+  props: {
+    color: {
+      type: String,
+      default: 'currentColor',
+    },
+  },
+}
+</script>

app/frontend/javascript/icons/TubeSearchIcon.vue

@@ -0,0 +1,19 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24" :fill="color" :stroke="color">
+    <path
+      d="M320-280v-80h87q-5 20-6.5 40t.5 40h-81Zm0 200q-83 0-141.5-58.5T120-280v-360q-33 0-56.5-23.5T40-720v-80q0-33 23.5-56.5T120-880h400q33 0 56.5 23.5T600-800v80q0 33-23.5 56.5T520-640v121q-24 15-44 35t-35 44H320v-80h120v-120H200v360q0 50 35 85t85 35q30 0 54.5-13t41.5-36q8 20 18 38t24 35q-27 26-62 41t-76 15ZM120-720h400v-80H120v80Zm540 520q42 0 71-29t29-71q0-42-29-71t-71-29q-42 0-71 29t-29 71q0 42 29 71t71 29ZM864-40 756-148q-22 14-46 21t-50 7q-75 0-127.5-52.5T480-300q0-75 52.5-127.5T660-480q75 0 127.5 52.5T840-300q0 26-7 50t-21 46L920-96l-56 56ZM120-720v-80 80Z"
+    />
+  </svg>
+</template>
+
+<script>
+export default {
+  name: 'TubeSearchIcon',
+  props: {
+    color: {
+      type: String,
+      default: 'currentColor',
+    },
+  },
+}
+</script>