change padding to userfriendlier size on phone close #23

src/vueLib/tables/members/MembersTable.vue

@@ -1,224 +1,233 @@
 <template>
-  <div class="q-pa-md">
-    <q-table
-      flat
-      bordered
-      ref="tableRef"
-      title="Members"
-      title-class="text-bold text-blue-9"
-      :no-data-label="$t('noDataAvailable')"
-      :loading-label="$t('loading')"
-      :rows-per-page-label="$t('recordsPerPage')"
-      :selected-rows-label="(val) => val + ' ' + $t('recordSelected')"
-      :rows="filteredMembers"
-      :columns="columns"
-      row-key="id"
-      v-model:pagination="pagination"
-      :loading="loading"
-      :filter="filter"
-      :selection="selectOption ? 'multiple' : 'none'"
-      v-model:selected="selected"
-      binary-state-sort
-      class="bigger-table-text"
-    >
-      <template v-slot:top-left>
-        <div>
-          <q-btn-group push flat style="color: grey">
-            <q-btn
-              v-if="user.isPermittedTo('members', 'write')"
-              dense
-              flat
-              icon="add"
-              @click="openAllValueDialog(null)"
-            >
-              <q-tooltip>{{ $t('addNewMember') }}</q-tooltip>
-            </q-btn>
-            <q-btn
-              v-if="
-                user.isPermittedTo('members', 'write') || user.isPermittedTo('members', 'delete')
-              "
-              dense
-              flat
-              style="color: grey"
-              :icon="selectOption ? 'check_box' : 'check_box_outline_blank'"
-              @click="selectOption = !selectOption"
-            >
-              <q-tooltip>{{ $t('selectMemberOptions') }}</q-tooltip>
-            </q-btn>
-            <q-btn
-              v-if="user.isPermittedTo('members', 'import')"
-              dense
-              flat
-              icon="upload"
-              @click="openUploadDialog"
-            >
-              <q-tooltip>{{ $t('importCSV') }}</q-tooltip>
-            </q-btn>
-            <q-btn
-              v-if="user.isPermittedTo('members', 'export')"
-              dense
-              flat
-              icon="download"
-              @click="exportCsv"
-            >
-              <q-tooltip>{{ $t('exportCSV') }}</q-tooltip>
-            </q-btn>
-          </q-btn-group>
-          <div v-if="selectOption && selected.length > 0">
-            <q-btn
-              v-if="inProps.addAttendees || inProps.addResponsible"
-              dense
-              color="grey-7"
-              flat
-              icon="person"
-              @click="addMemberTo"
-            >
-              <q-badge floating transparent color="primary" text-color="primary-text">+</q-badge>
-            </q-btn>
-            <q-btn v-else flat dense icon="more_vert" @click="openSubmenu = true" />
+  <q-table
+    flat
+    bordered
+    ref="tableRef"
+    title="Members"
+    title-class="text-bold text-blue-9"
+    :no-data-label="$t('noDataAvailable')"
+    :loading-label="$t('loading')"
+    :rows-per-page-label="$t('recordsPerPage')"
+    :selected-rows-label="(val) => val + ' ' + $t('recordSelected')"
+    :rows="filteredMembers"
+    :columns="columns"
+    row-key="id"
+    v-model:pagination="pagination"
+    :loading="loading"
+    :filter="filter"
+    :selection="selectOption ? 'multiple' : 'none'"
+    v-model:selected="selected"
+    binary-state-sort
+    dense
+    class="bigger-table-text"
+  >
+    <!-- top left of table-->
 
-            <q-menu v-if="openSubmenu" anchor="bottom middle" self="top middle">
-              <q-item clickable v-close-popup @click="addToEvent" class="text-primary">{{
-                $t('addToEvent')
-              }}</q-item>
-              <q-item
-                v-if="user.isPermittedTo('members', 'delete')"
-                clickable
-                v-close-popup
-                @click="openRemoveDialog(...selected)"
-                class="text-negative"
-                >{{ $t('delete') }}</q-item
-              >
-            </q-menu>
-          </div>
-          <q-card flat class="q-pa-sm">
-            <q-select
-              :label="$t('filterByColumn')"
-              dense
-              v-model="selectedColumnFilter"
-              option-label="label"
-              option-value="name"
-              map-options
-              emit-value
-              clearable
-              :options="columns.filter((col) => col.label !== '')"
-              v-on:clear="selectedColumnOptions = []"
-              @update:model-value="
-                filterMembers(selectedColumnFilter, ...(selectedColumnOptions || []))
-              "
-              class="q-mt-xs"
-            />
-            <q-select
-              v-if="selectedColumnFilter"
-              :label="$t('filterByColumnValue')"
-              dense
-              v-model="selectedColumnOptions"
-              :options="setColumnOptions(selectedColumnFilter)"
-              class="q-mt-xs"
-              multiple
-              clearable
-              @update:model-value="
-                filterMembers(selectedColumnFilter, ...(selectedColumnOptions || []))
-              "
-            />
-          </q-card>
-        </div>
-        <div v-if="selectOption && selected.length > 0" class="text-weight-bold">
-          {{ $t('selected') }}: {{ selected.length }}
-        </div>
-      </template>
-      <template v-slot:top-right>
-        <q-input filled dense debounce="300" v-model="filter" :placeholder="$t('search')">
-          <template v-slot:append>
-            <q-icon name="search" />
-          </template>
-        </q-input>
-      </template>
-      <template v-slot:body-cell="props">
-        <q-td
-          :props="props"
-          :class="getRowClass(props.row)"
-          :style="user.isPermittedTo('members', 'write') ? 'cursor: pointer' : ''"
-          @click="
-            user.isPermittedTo('members', 'write') &&
-            openSingleValueDialog(props.col.label, props.col.name, props.row)
-          "
-        >
-          {{ props.value }}
-        </q-td>
-      </template>
-      <template v-slot:body-cell-cake="props">
-        <q-td :props="props" :class="getRowClass(props.row)">
-          <q-icon
-            :name="isXDaysBeforeAnnualDate(props.row.birthday, 1) ? 'cake' : ''"
-            :color="'red'"
-            size="md"
-          />
-        </q-td>
-      </template>
-      <template v-slot:body-cell-group="props">
-        <q-td :props="props">
-          <q-select
-            v-if="groups.length > 0"
-            :readonly="!user.isPermittedTo('members', 'write')"
-            :options="groups"
-            emit-value
-            map-options
-            option-value="name"
-            option-label="name"
-            v-model="props.row.group"
-            @update:model-value="updateMember(props.row)"
-          ></q-select>
-        </q-td>
-      </template>
-      <template v-slot:body-cell-responsiblePerson="props">
-        <q-td :props="props">
-          <q-select
-            v-if="responsibles.length > 0"
-            :readonly="!user.isPermittedTo('members', 'write')"
-            :options="responsibles"
-            :option-label="(opt) => opt.firstName + ' ' + opt.lastName"
-            v-model="props.row.responsiblePerson"
-            @update:model-value="updateMember(props.row)"
-          ></q-select>
-        </q-td>
-      </template>
-      <template v-slot:body-cell-option="props">
-        <q-td :props="props">
+    <template v-slot:top-left>
+      <div>
+        <q-btn-group push flat style="color: grey">
+          <q-btn
+            v-if="user.isPermittedTo('members', 'write')"
+            dense
+            flat
+            icon="add"
+            @click="openAllValueDialog(null)"
+          >
+            <q-tooltip>{{ $t('addNewMember') }}</q-tooltip>
+          </q-btn>
           <q-btn
             v-if="user.isPermittedTo('members', 'write') || user.isPermittedTo('members', 'delete')"
-            flat
             dense
-            icon="more_vert"
-            @click="openSubmenu = true"
-          />
-          <q-menu v-if="openSubmenu" anchor="top right" self="top left">
+            flat
+            style="color: grey"
+            :icon="selectOption ? 'check_box' : 'check_box_outline_blank'"
+            @click="selectOption = !selectOption"
+          >
+            <q-tooltip>{{ $t('selectMemberOptions') }}</q-tooltip>
+          </q-btn>
+          <q-btn
+            v-if="user.isPermittedTo('members', 'import')"
+            dense
+            flat
+            icon="upload"
+            @click="openUploadDialog"
+          >
+            <q-tooltip>{{ $t('importCSV') }}</q-tooltip>
+          </q-btn>
+          <q-btn
+            v-if="user.isPermittedTo('members', 'export')"
+            dense
+            flat
+            icon="download"
+            @click="exportCsv"
+          >
+            <q-tooltip>{{ $t('exportCSV') }}</q-tooltip>
+          </q-btn>
+        </q-btn-group>
+        <div v-if="selectOption && selected.length > 0">
+          <q-btn
+            v-if="inProps.addAttendees || inProps.addResponsible"
+            dense
+            color="grey-7"
+            flat
+            icon="person"
+            @click="addMemberTo"
+          >
+            <q-badge floating transparent color="primary" text-color="primary-text">+</q-badge>
+          </q-btn>
+          <q-btn v-else flat dense icon="more_vert" @click="openSubmenu = true" />
+
+          <q-menu v-if="openSubmenu" anchor="bottom middle" self="top middle">
+            <q-item clickable v-close-popup @click="addToEvent" class="text-primary">{{
+              $t('addToEvent')
+            }}</q-item>
             <q-item
-              v-if="user.isPermittedTo('members', 'write')"
+              v-if="user.isPermittedTo('members', 'delete')"
               clickable
               v-close-popup
-              @click="openAllValueDialog(props.row)"
-              class="text-primary"
-              >{{ $t('edit') }}</q-item
-            >
-            <q-item
-              v-if="
-                user.isPermittedTo('members', 'delete') &&
-                !inProps.addAttendees &&
-                !inProps.addResponsible
-              "
-              clickable
-              v-close-popup
-              @click="openRemoveDialog(props.row)"
+              @click="openRemoveDialog(...selected)"
               class="text-negative"
-              title="zu"
               >{{ $t('delete') }}</q-item
             >
           </q-menu>
-        </q-td>
-      </template>
-    </q-table>
-  </div>
+        </div>
+        <q-card flat class="q-pa-sm">
+          <q-select
+            :label="$t('filterByColumn')"
+            dense
+            v-model="selectedColumnFilter"
+            option-label="label"
+            option-value="name"
+            map-options
+            emit-value
+            clearable
+            :options="columns.filter((col) => col.label !== '')"
+            v-on:clear="selectedColumnOptions = []"
+            @update:model-value="
+              filterMembers(selectedColumnFilter, ...(selectedColumnOptions || []))
+            "
+            class="q-mt-xs"
+          />
+          <q-select
+            v-if="selectedColumnFilter"
+            :label="$t('filterByColumnValue')"
+            dense
+            v-model="selectedColumnOptions"
+            :options="setColumnOptions(selectedColumnFilter)"
+            class="q-mt-xs"
+            multiple
+            clearable
+            @update:model-value="
+              filterMembers(selectedColumnFilter, ...(selectedColumnOptions || []))
+            "
+          />
+        </q-card>
+      </div>
+      <div v-if="selectOption && selected.length > 0" class="text-weight-bold">
+        {{ $t('selected') }}: {{ selected.length }}
+      </div>
+    </template>
+
+    <!-- top right of table-->
+
+    <template v-slot:top-right>
+      <q-input filled dense debounce="300" v-model="filter" :placeholder="$t('search')">
+        <template v-slot:append>
+          <q-icon name="search" />
+        </template>
+      </q-input>
+    </template>
+
+    <!-- table body content-->
+
+    <template v-slot:body-cell="props">
+      <q-td
+        :props="props"
+        :class="getRowClass(props.row)"
+        :style="user.isPermittedTo('members', 'write') ? 'cursor: pointer' : ''"
+        @click="
+          user.isPermittedTo('members', 'write') &&
+          openSingleValueDialog(props.col.label, props.col.name, props.row)
+        "
+      >
+        {{ props.value }}
+      </q-td>
+    </template>
+    <template v-slot:body-cell-cake="props">
+      <q-td :props="props" :class="getRowClass(props.row)">
+        <q-icon
+          :name="isXDaysBeforeAnnualDate(props.row.birthday, 1) ? 'cake' : ''"
+          :color="'red'"
+          size="md"
+        />
+      </q-td>
+    </template>
+    <template v-slot:body-cell-group="props">
+      <q-td :props="props">
+        <q-select
+          v-if="groups.length > 0"
+          dense
+          :readonly="!user.isPermittedTo('members', 'write')"
+          :options="groups"
+          emit-value
+          map-options
+          option-value="name"
+          option-label="name"
+          v-model="props.row.group"
+          @update:model-value="updateMember(props.row)"
+        ></q-select>
+      </q-td>
+    </template>
+    <template v-slot:body-cell-responsiblePerson="props">
+      <q-td :props="props">
+        <q-select
+          dense
+          v-if="responsibles.length > 0"
+          :readonly="!user.isPermittedTo('members', 'write')"
+          :options="responsibles"
+          :option-label="(opt) => opt.firstName + ' ' + opt.lastName"
+          v-model="props.row.responsiblePerson"
+          @update:model-value="updateMember(props.row)"
+        ></q-select>
+      </q-td>
+    </template>
+    <template v-slot:body-cell-option="props">
+      <q-td :props="props">
+        <q-btn
+          v-if="user.isPermittedTo('members', 'write') || user.isPermittedTo('members', 'delete')"
+          flat
+          dense
+          icon="more_vert"
+          @click="openSubmenu = true"
+        />
+        <q-menu v-if="openSubmenu" anchor="top right" self="top left">
+          <q-item
+            dense
+            v-if="user.isPermittedTo('members', 'write')"
+            clickable
+            v-close-popup
+            @click="openAllValueDialog(props.row)"
+            class="text-primary"
+            >{{ $t('edit') }}</q-item
+          >
+          <q-item
+            v-if="
+              user.isPermittedTo('members', 'delete') &&
+              !inProps.addAttendees &&
+              !inProps.addResponsible
+            "
+            dense
+            clickable
+            v-close-popup
+            @click="openRemoveDialog(props.row)"
+            class="text-negative"
+            title="zu"
+            >{{ $t('delete') }}</q-item
+          >
+        </q-menu>
+      </q-td>
+    </template>
+  </q-table>
   <EditOneDialog
     ref="editOneDialog"
     endpoint="members/edit"
@@ -228,6 +237,7 @@
   <EditAllDialog
     ref="editAllDialog"
     :responsibles="responsibles"
+    :group="groups"
     v-on:update="updateMember"
   ></EditAllDialog>
   <OkDialog