add posibility user can change own password close #16

src/vueLib/tables/users/UserTable.vue

@@ -1,133 +1,148 @@
 <template>
-  <div class="q-pa-md">
-    <q-table
-      flat
-      bordered
-      ref="tableRef"
-      title="Users"
-      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="users"
-      :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>
-        <q-btn-group push flat style="color: grey">
-          <q-btn
-            v-if="user.isPermittedTo('userSettings', 'write')"
-            dense
-            flat
-            icon="add"
-            @click="openAllValueDialog(null)"
-          >
-            <q-tooltip>{{ $t('addNewUser') }}</q-tooltip>
-          </q-btn>
-          <q-btn
-            v-if="user.isPermittedTo('userSettings', 'write')"
-            dense
-            flat
-            style="color: grey"
-            :icon="selectOption ? 'check_box' : 'check_box_outline_blank'"
-            @click="selectOption = !selectOption"
-          >
-            <q-tooltip>{{ $t('selectUserOptions') }}</q-tooltip>
-          </q-btn>
-        </q-btn-group>
-        <div v-if="selectOption && selected.length > 0">
-          <q-btn 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="openRemoveDialog(...selected)"
-              class="text-negative"
-              >{{ $t('delete') }}</q-item
-            >
-          </q-menu>
-        </div>
-        <div v-if="selectOption && selected.length > 0" class="q-ml-md 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"
-          :style="
-            autorized(props.row) && user.isPermittedTo('userSettings', 'write')
-              ? 'cursor: pointer'
-              : ''
-          "
-          @click="
-            autorized(props.row) && user.isPermittedTo('userSettings', 'write')
-              ? openSingleValueDialog(props.col.label, props.col.name, props.row)
-              : ''
-          "
+  <q-table
+    flat
+    bordered
+    ref="tableRef"
+    title="Users"
+    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="users"
+    :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"
+  >
+    <template v-slot:top-left>
+      <q-btn-group push flat style="color: grey">
+        <q-btn
+          v-if="user.isPermittedTo('userSettings', 'write')"
+          dense
+          flat
+          icon="add"
+          @click="openAllValueDialog(null)"
         >
-          {{ props.value }}
-        </q-td>
-      </template>
-      <template v-slot:body-cell-role="props">
-        <q-td :props="props">
-          <q-select
-            :readonly="!user.isPermittedTo('userSettings', 'write') || !autorized(props.row)"
-            dense
-            v-model="props.row.role"
-            :options="localRoles"
-            @update:model-value="updateUser(props.row)"
-          ></q-select>
-        </q-td>
-      </template>
-      <template v-slot:body-cell-expiration="props">
-        <q-td
-          :props="props"
-          :style="
-            autorized(props.row) && user.isPermittedTo('userSettings', 'write')
-              ? 'cursor: pointer'
-              : ''
-          "
-          @click="
-            autorized(props.row) && user.isPermittedTo('userSettings', 'write')
-              ? openSingleValueDialog(props.col.label, props.col.name, props.row)
-              : ''
-          "
+          <q-tooltip>{{ $t('addNewUser') }}</q-tooltip>
+        </q-btn>
+        <q-btn
+          v-if="user.isPermittedTo('userSettings', 'write')"
+          dense
+          flat
+          style="color: grey"
+          :icon="selectOption ? 'check_box' : 'check_box_outline_blank'"
+          @click="selectOption = !selectOption"
         >
-          {{ props.value === 'never' ? $t('never') : props.value }}
-        </q-td>
-      </template>
-      <template v-slot:body-cell-option="props">
-        <q-td :props="props">
-          <q-btn
-            v-if="user.isPermittedTo('userSettings', 'delete')"
-            :disable="!autorized(props.row)"
-            flat
-            dense
-            icon="delete"
-            color="negative"
-            @click="openRemoveDialog(props.row)"
+          <q-tooltip>{{ $t('selectUserOptions') }}</q-tooltip>
+        </q-btn>
+      </q-btn-group>
+      <div v-if="selectOption && selected.length > 0">
+        <q-btn 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="openRemoveDialog(...selected)"
+            class="text-negative"
+            >{{ $t('delete') }}</q-item
           >
-            <q-tooltip> {{ $t('delete') }} </q-tooltip>
-          </q-btn>
-        </q-td>
-      </template>
-    </q-table>
-  </div>
+        </q-menu>
+      </div>
+      <div v-if="selectOption && selected.length > 0" class="q-ml-md text-weight-bold">
+        {{ $t('selected') }}: {{ selected.length }}
+      </div>
+    </template>
+
+    <!-- top right of table-->
+
+    <template v-slot:top-right>
+      <SearchableInput v-model="filter" :placeholder="$t('search')" />
+    </template>
+
+    <!-- table body content-->
+
+    <template v-slot:body-cell="props">
+      <q-td
+        :props="props"
+        :style="
+          autorized(props.row) && user.isPermittedTo('userSettings', 'write')
+            ? 'cursor: pointer'
+            : ''
+        "
+        @click="
+          autorized(props.row) && user.isPermittedTo('userSettings', 'write')
+            ? openSingleValueDialog(props.col.label, props.col.name, props.row)
+            : ''
+        "
+      >
+        {{ props.value }}
+      </q-td>
+    </template>
+    <template v-slot:body-cell-newPassword="props">
+      <q-td :props="props">
+        <q-btn
+          v-if="autorized(props.row) && currentUser.id === props.row.id"
+          flat
+          dense
+          no-caps
+          color="primary"
+          :label="$t('changePassword')"
+          @click="openPwdDialog(props.row)"
+        ></q-btn>
+      </q-td>
+    </template>
+    <template v-slot:body-cell-role="props">
+      <q-td :props="props">
+        <q-select
+          :readonly="!user.isPermittedTo('userSettings', 'write') || !autorized(props.row)"
+          dense
+          v-model="props.row.role"
+          :options="localRoles"
+          option-label="role"
+          @update:model-value="updateUser(props.row)"
+        ></q-select>
+      </q-td>
+    </template>
+    <template v-slot:body-cell-expiration="props">
+      <q-td
+        :props="props"
+        :style="
+          autorized(props.row) && user.isPermittedTo('userSettings', 'write')
+            ? 'cursor: pointer'
+            : ''
+        "
+        @click="
+          autorized(props.row) && user.isPermittedTo('userSettings', 'write')
+            ? openSingleValueDialog(props.col.label, props.col.name, props.row)
+            : ''
+        "
+      >
+        {{ props.value === 'never' ? $t('never') : props.value }}
+      </q-td>
+    </template>
+    <template v-slot:body-cell-option="props">
+      <q-td :props="props">
+        <q-btn
+          v-if="user.isPermittedTo('userSettings', 'delete')"
+          :disable="!autorized(props.row)"
+          flat
+          dense
+          icon="delete"
+          color="negative"
+          @click="openRemoveDialog(props.row)"
+        >
+          <q-tooltip> {{ $t('delete') }} </q-tooltip>
+        </q-btn>
+      </q-td>
+    </template>
+  </q-table>
   <EditOneDialog
     ref="editOneDialog"
     query-id
@@ -145,6 +160,7 @@
     button-ok-color="red"
     v-on:update-confirm="(val) => removeUser(...val)"
   ></OkDialog>
+  <ChangePassword ref="changePwdDialog" v-on:update:password="changePassword" />
 </template>
 
 <script setup lang="ts">
@@ -159,6 +175,8 @@ import { useUserTable } from './UserTable';
 import { roles, useRoleTable } from '../roles/RoleTable';
 import { i18n } from 'src/boot/lang';
 import { useUserStore } from 'src/vueLib/login/userStore';
+import ChangePassword from 'src/vueLib/login/ChangePassword.vue';
+import SearchableInput from '../components/SearchableInput.vue';
 
 const { NotifyResponse } = useNotify();
 const editOneDialog = ref();
@@ -176,6 +194,7 @@ const currentUser = ref();
 const { users, pagination, loading, columns, updateUsers } = useUserTable();
 const { updateRoles } = useRoleTable();
 const user = useUserStore();
+const changePwdDialog = ref();
 
 //load on mounting page
 onMounted(() => {
@@ -201,6 +220,26 @@ function openAllValueDialog(user: User | null) {
   editAllDialog.value?.open(user);
 }
 
+//opens password change dialog
+function openPwdDialog(user: User) {
+  changePwdDialog.value.open(user);
+}
+
+//change password api request
+async function changePassword(user: User) {
+  console.log(8, user);
+  if (user.password == user.newPassword) {
+    NotifyResponse(i18n.global.t('samePasswordEntered'), 'error');
+    return;
+  }
+
+  await appApi
+    .post('/users/new/password', user)
+    .then((resp) => console.log(67, resp))
+    .catch((err) => console.error(err));
+  changePwdDialog.value.close();
+}
+
 //opens remove dialog
 function openRemoveDialog(...users: Users) {
   if (users.length === 1) {
@@ -245,20 +284,6 @@ function updateUser(user: User) {
 </script>
 
 <style>
-@keyframes blink-yellow {
-  0%,
-  100% {
-    background-color: yellow;
-  }
-  50% {
-    background-color: transparent;
-  }
-}
-
-.blink-yellow {
-  animation: blink-yellow 1.5s step-start 6 !important;
-}
-
 .bigger-table-text .q-table__middle td {
   font-size: 14px;
 }