From 380c83fcc7593e6a023e21e12f06d2fc3b20f7ba Mon Sep 17 00:00:00 2001
From: Oleg Zharkov <oleg.zharkov22@gmail.com>
Date: Mon, 1 Feb 2021 19:15:41 +0100
Subject: [PATCH] introduce colums

---
 .../LibraryFolderPermissions.vue              | 79 +++++++++++--------
 .../PermissionsInputField.vue                 |  2 -
 2 files changed, 47 insertions(+), 34 deletions(-)

diff --git a/client/src/components/LibraryFolder/LibraryFolderPermissions/LibraryFolderPermissions.vue b/client/src/components/LibraryFolder/LibraryFolderPermissions/LibraryFolderPermissions.vue
index 8725957175e..c5a6fffe633 100644
--- a/client/src/components/LibraryFolder/LibraryFolderPermissions/LibraryFolderPermissions.vue
+++ b/client/src/components/LibraryFolder/LibraryFolderPermissions/LibraryFolderPermissions.vue
@@ -1,6 +1,6 @@
 <template>
     <div>
-        <div>
+        <div v-if="folder">
             <b-button variant="primary" :href="getParentLink()">
                 <font-awesome-icon icon="angle-double-left">1</font-awesome-icon>
             </b-button>
@@ -26,43 +26,58 @@
                 <h4>
                     Roles that can manage permissions on this folder
                 </h4>
-                <PermissionsInputField
-                    v-if="manage_folder_role_list"
-                    :folder_id="folder_id"
-                    :permission_type="manage_type"
-                    :initial_value="manage_folder_role_list"
-                    @input="setUserPermissionsPreferences"
-                />
-
-                <div class="alert alert-info roles-selection">
-                    User with <strong>any</strong> of these roles can manage permissions on this folder.
-                </div>
+                <b-row>
+                    <b-col>
+                        <PermissionsInputField
+                            v-if="manage_folder_role_list"
+                            :folder_id="folder_id"
+                            :permission_type="manage_type"
+                            :initial_value="manage_folder_role_list"
+                            @input="setUserPermissionsPreferences"
+                    /></b-col>
+                    <b-col>
+                        <b-alert show variant="info">
+                            User with <strong>any</strong> of these roles can manage permissions on this folder.
+                        </b-alert>
+                    </b-col>
+                </b-row>
                 <h4>
                     Roles that can add items to this folder
                 </h4>
-                <PermissionsInputField
-                    v-if="add_library_item_role_list"
-                    :folder_id="folder_id"
-                    :permission_type="add_type"
-                    :initial_value="add_library_item_role_list"
-                    @input="setUserPermissionsPreferences"
-                />
-                <div class="alert alert-info roles-selection">
-                    User with <strong>any</strong> of these roles can add items to this folder (folders and datasets).
-                </div>
+                <b-row>
+                    <b-col>
+                        <PermissionsInputField
+                            v-if="add_library_item_role_list"
+                            :folder_id="folder_id"
+                            :permission_type="add_type"
+                            :initial_value="add_library_item_role_list"
+                            @input="setUserPermissionsPreferences"
+                    /></b-col>
+                    <b-col>
+                        <b-alert class="p-3" show variant="info">
+                            User with <strong>any</strong> of these roles can add items to this folder (folders and
+                            datasets).
+                        </b-alert>
+                    </b-col>
+                </b-row>
                 <h4>
                     Roles that can modify this folder
                 </h4>
-                <PermissionsInputField
-                    v-if="modify_folder_role_list"
-                    :folder_id="folder_id"
-                    :permission_type="modify_type"
-                    :initial_value="modify_folder_role_list"
-                    @input="setUserPermissionsPreferences"
-                />
-                <div class="alert alert-info roles-selection">setUserPermissionsPreferences
-                    User with <strong>any</strong> of these roles can modify this folder (name, etc.).
-                </div>
+                <b-row>
+                    <b-col>
+                        <PermissionsInputField
+                            v-if="modify_folder_role_list"
+                            :folder_id="folder_id"
+                            :permission_type="modify_type"
+                            :initial_value="modify_folder_role_list"
+                            @input="setUserPermissionsPreferences"
+                    /></b-col>
+                    <b-col>
+                        <b-alert show variant="info">
+                            User with <strong>any</strong> of these roles can modify this folder (name, etc.).
+                        </b-alert></b-col
+                    >
+                </b-row>
                 <button
                     data-toggle="tooltip"
                     data-placement="top"
diff --git a/client/src/components/LibraryFolder/LibraryFolderPermissions/PermissionsInputField.vue b/client/src/components/LibraryFolder/LibraryFolderPermissions/PermissionsInputField.vue
index 9991bb87b44..3e2ed84b223 100644
--- a/client/src/components/LibraryFolder/LibraryFolderPermissions/PermissionsInputField.vue
+++ b/client/src/components/LibraryFolder/LibraryFolderPermissions/PermissionsInputField.vue
@@ -51,7 +51,6 @@ export default {
             page: 1,
             page_limit: 10,
             fetched_options: [],
-
         };
     },
     created() {
@@ -78,7 +77,6 @@ export default {
             }
         },
         valueChanged() {
-            console.log(this.value)
             this.$emit("input", this.value, this.permission_type);
         },
     },