From 9a7af36dccfc608fe8677a1ffdf0cc99e5f56505 Mon Sep 17 00:00:00 2001
From: AMMAR <ammarbr@hotmail.com>
Date: Wed, 7 Sep 2022 14:55:22 +0200
Subject: [PATCH] #88 - Set maxWidth to the table of dataElementGroup members

- Redesign the dataElementGroupMembers table
---
 components/common/members.vue | 134 +++++++++++++++++-----------------
 1 file changed, 68 insertions(+), 66 deletions(-)

diff --git a/components/common/members.vue b/components/common/members.vue
index 7cd6d3f..b80c43c 100644
--- a/components/common/members.vue
+++ b/components/common/members.vue
@@ -1,70 +1,72 @@
 <template>
-  <v-row
-    class="pa-4"
-  >
-    <v-col cols="5" class="elevation-1 pa-3 ma-2">
-      <v-row>
-        <v-col>
-          <v-text-field
-            v-model="search.query"
-            :counter="255"
-            :label="$t('global.searchText')"
-            @input="executeSearch()"
-          />
-        </v-col>
-      </v-row>
-      <v-list
-        max-height="300px"
-        class="overflow-y-auto"
-      >
-        <draggable v-model="membersToChooseFrom" :options="{group:'people'}" min-height="100px">
-          <template v-for="item in membersToChooseFrom">
-            <v-list :key="item.id">
-              <v-list-item two-line>
-                <v-list-item-content>
-                  <v-list-item-title>{{ item.designation }}</v-list-item-title>
-                  <v-list-item-subtitle>{{ item.definition }}</v-list-item-subtitle>
-                </v-list-item-content>
-              </v-list-item>
-            </v-list>
-          </template>
-        </draggable>
-      </v-list>
-    </v-col>
-    <v-col cols="5" class="elevation-1 pa-3 ma-2">
-      <v-subheader>
-        Selected Members:
-      </v-subheader>
-      <v-list
-        max-height="300px"
-        class="overflow-y-auto"
-      >
-        <draggable v-model="selectedMembers" :options="{group:'people'}">
-          <template v-for="item in selectedMembers">
-            <v-list :key="item.id" min-height="50px">
-              <v-list-item two-line>
-                <v-list-item-content>
-                  <v-list-item-title>{{ item.designation }}</v-list-item-title>
-                  <v-list-item-subtitle>{{ item.definition }}</v-list-item-subtitle>
-                </v-list-item-content>
-              </v-list-item>
-            </v-list>
-          </template>
-          <div v-if="selectedMembers.length === 0" align="middle">
-            <v-icon size="70">
-              mdi-hand-pointing-up
-            </v-icon>
-            <h3 class="text-h2 mb-2">
-              {{ $t('global.addItem') }}
-            </h3>
-            <h3 class="text-h6 mb-2">
-              {{ $t('global.dragAndDrop') }}
-            </h3>
-          </div>
-        </draggable>
-      </v-list>
-    </v-col>
-  </v-row>
+  <v-container fluid>
+    <v-row
+      class="pa-1"
+    >
+      <v-col cols="5" class="elevation-1 pa-3 ma-2">
+        <v-row>
+          <v-col>
+            <v-text-field
+              v-model="search.query"
+              :counter="255"
+              :label="$t('global.searchText')"
+              @input="executeSearch()"
+            />
+          </v-col>
+        </v-row>
+        <v-list
+          max-height="300px"
+          class="overflow-y-auto"
+        >
+          <draggable v-model="membersToChooseFrom" :options="{group:'people'}" min-height="100px">
+            <template v-for="item in membersToChooseFrom">
+              <v-list :key="item.id">
+                <v-list-item two-line>
+                  <v-list-item-content>
+                    <v-list-item-title>{{ item.designation }}</v-list-item-title>
+                    <v-list-item-subtitle>{{ item.definition }}</v-list-item-subtitle>
+                  </v-list-item-content>
+                </v-list-item>
+              </v-list>
+            </template>
+          </draggable>
+        </v-list>
+      </v-col>
+      <v-col cols="5" class="elevation-1 pa-3 ma-2">
+        <v-subheader>
+          Selected Members:
+        </v-subheader>
+        <v-list
+          max-height="300px"
+          class="overflow-y-auto"
+        >
+          <draggable v-model="selectedMembers" :options="{group:'people'}">
+            <template v-for="item in selectedMembers">
+              <v-list :key="item.id" min-height="50px">
+                <v-list-item two-line>
+                  <v-list-item-content>
+                    <v-list-item-title>{{ item.designation }}</v-list-item-title>
+                    <v-list-item-subtitle>{{ item.definition }}</v-list-item-subtitle>
+                  </v-list-item-content>
+                </v-list-item>
+              </v-list>
+            </template>
+            <div v-if="selectedMembers.length === 0" align="middle">
+              <v-icon size="70">
+                mdi-hand-pointing-up
+              </v-icon>
+              <h3 class="text-h2 mb-2">
+                {{ $t('global.addItem') }}
+              </h3>
+              <h3 class="text-h6 mb-2">
+                {{ $t('global.dragAndDrop') }}
+              </h3>
+            </div>
+          </draggable>
+        </v-list>
+      </v-col>
+    </v-row>
+  </v-container>
 </template>
 <script>
 import draggable from 'vuedraggable'