Add buttons, fix layout

Author: guerler

client/src/components/Dataset/DatasetCopy.vue

@@ -148,22 +148,19 @@ onMounted(loadInitial);
 </script>
 
 <template>
-    <div class="d-flex flex-column h-100">
+    <div class="d-flex flex-column">
         <div>
             <BAlert v-if="errorMessage" variant="danger" show>{{ errorMessage }}</BAlert>
             <BAlert v-if="successMessage" variant="success" show>{{ successMessage }}</BAlert>
             <Heading h1 separator size="lg">Copy Datasets and Collections</Heading>
         </div>
-
-        <div class="d-flex flex-grow-1 h-100">
+        <div class="dataset-copy-columns d-flex flex-grow-1">
             <!-- Left column -->
-            <div class="d-flex flex-column flex-grow-1 p-2">
+            <div class="d-flex flex-column flex-grow-1 w-50 pr-1">
                 <Heading h2 size="sm">
                     <FontAwesomeIcon :icon="faStream" />
                     <span>From History</span>
                 </Heading>
-
-                <label class="form-label">Source History</label>
                 <Multiselect
                     v-model="sourceHistory"
                     :options="histories"
@@ -172,60 +169,63 @@ onMounted(loadInitial);
                     deselect-label=""
                     select-label=""
                     @input="loadSourceContents" />
-
-                <div class="d-flex mb-2 mt-3">
-                    <BButton size="sm" variant="secondary" class="me-2" @click="toggleAll(true)">All</BButton>
-                    <BButton size="sm" variant="secondary" @click="toggleAll(false)">None</BButton>
-                </div>
-
-                <div class="flex-grow-1 overflow-auto border rounded p-2">
+                <div class="dataset-copy-contents flex-grow-1 overflow-auto border rounded p-2 mt-2">
                     <div v-if="sourceContents.length === 0" class="text-muted">This history has no datasets</div>
-
                     <div v-for="item in sourceContents" :key="item.id" class="d-flex align-items-center mb-1">
                         <BFormCheckbox v-model="sourceContentSelection[`${item.type}|${item.id}`]" class="me-2" />
                         <span>{{ item.hid }}: {{ item.name }}</span>
                     </div>
                 </div>
+                <div class="d-flex mt-2">
+                    <BButton size="sm" variant="outline-primary" class="mr-2"v-localize  @click="toggleAll(true)">
+                        Select All
+                    </BButton>
+                    <BButton size="sm" variant="outline-primary" v-localize @click="toggleAll(false)">
+                        Unselect All
+                    </BButton>
+                </div>
             </div>
 
             <!-- Right column -->
-            <div class="d-flex flex-column flex-grow-1 p-2">
+            <div class="d-flex flex-column flex-grow-1 w-50 pl-1">
                 <Heading h2 size="sm">
                     <FontAwesomeIcon :icon="faArrowRight" />
                     <span>To History</span>
                 </Heading>
-
                 <div v-if="!useMultipleTargets">
-                    <label class="form-label">Target History</label>
                     <Multiselect
                         v-model="targetSingleHistory"
                         :options="histories"
                         label="name"
                         track-by="id"
                         deselect-label=""
                         select-label="" />
-
-                    <BButton variant="link" class="p-0 mt-2" @click="useMultipleTargets = true">
+                    <BButton variant="link" class="p-0 mt-2" v-localize @click="useMultipleTargets = true">
                         Choose multiple histories
                     </BButton>
                 </div>
-
                 <div v-else>
                     <div v-for="h in histories" :key="h.id" class="d-flex align-items-center mb-1">
                         <BFormCheckbox v-model="targetMultiSelections[h.id]" class="me-2" />
                         <span>{{ h.name }}</span>
                     </div>
                 </div>
-
                 <hr class="my-4" />
-
                 <label class="form-label">New history name</label>
                 <BFormInput v-model="newHistoryName" class="mb-3" />
-
                 <div class="mt-auto text-center">
-                    <BButton variant="primary" :disabled="loading" @click="submitCopy"> Copy items </BButton>
+                    <BButton variant="primary" :disabled="loading" v-localize @click="submitCopy"> Copy items </BButton>
                 </div>
             </div>
         </div>
     </div>
 </template>
+
+<style scoped>
+.dataset-copy-columns {
+    min-height: 0;
+}
+.dataset-copy-contents {
+    min-height: 10rem;
+}
+</style>