Update user group

quasar.conf.js

@@ -102,9 +102,9 @@ module.exports = configure(function (ctx) {
       plugins: ['Notify'],
     },
 
-    // animations: 'all', // --- includes all animations
+    animations: 'all', // --- includes all animations
     // https://v2.quasar.dev/options/animations
-    animations: [],
+    // animations: [],
 
     // https://v2.quasar.dev/quasar-cli/developing-ssr/configuring-ssr
     ssr: {

src/assets/configurations.example.ts

@@ -23,4 +23,5 @@ export enum API_PATHS {
   getGroupInfo = '/group/get_info',
   getListPages = '/user/page/list',
   getListGroupUsers = '/user/group/list',
+  addNewGroupUser = 'user/group/add',
 }

src/components/group-info/GroupInfo.ts

-import { defineComponent, ref } from 'vue';
+import { defineComponent } from 'vue';
 import { EditMode } from 'src/assets/enums';
+import { i18n } from 'src/boot/i18n';
 
-const check = ref(false);
-const check1 = ref(false);
-const check2 = ref(false);
-const check3 = ref(false);
+const groupNameRules = [
+  (val?: string) =>
+    (val && val.trim().length) ||
+    i18n.global.t('userGroupPage.groupInfo.validateMessages.requireGroupName'),
+  (val?: string) =>
+    (val && val.trim().length <= 10) ||
+    i18n.global.t(
+      'userGroupPage.groupInfo.validateMessages.groupNameLengthInvalid'
+    ),
+];
 
 export const GroupInfoScript = defineComponent({
   props: {
@@ -21,8 +28,13 @@ export const GroupInfoScript = defineComponent({
       requite: true,
     },
   },
-  emits: ['resetGroupInfo'],
+  emits: [
+    'resetGroupInfo',
+    'update:groupName',
+    'update:groupDescription',
+    'saveGroupInfo',
+  ],
   setup() {
-    return { check, check1, check2, check3, EditMode };
+    return { EditMode, groupNameRules };
   },
 });

src/components/group-info/index.vue

 <template>
   <q-card flat bordered class="my-card">
-    <q-card-section style="padding-top: 28px">
-      <div class="row">
-        <div class="col-4" style="display: flex">
-          <div class="text-h6">Thông tin nhóm</div>
+    <q-form @submit.prevent="$emit('saveGroupInfo')">
+      <q-card-section style="padding-top: 28px">
+        <div class="row">
+          <div class="col-4" style="display: flex">
+            <div class="text-h6">{{ $t('userGroupPage.groupInfo.title') }}</div>
+          </div>
+          <div class="col-8" style="display: flex; justify-content: flex-end">
+            <q-btn
+              v-if="isDisable === EditMode.edit"
+              style="margin-right: 8px"
+              color="red"
+              icon="delete"
+              :label="$t('crudActions.delete')"
+            />
+            <q-btn
+              v-if="isDisable"
+              color="primary"
+              icon="update"
+              :label="
+                isDisable === EditMode.edit
+                  ? $t('crudActions.update')
+                  : $t('crudActions.add')
+              "
+              type="submit"
+            />
+          </div>
+          <div v-if="isDisable" style="position: absolute; top: 0; right: 0">
+            <q-btn
+              @click="$emit('resetGroupInfo', EditMode.default)"
+              size="x-small"
+              flat
+              round
+              color="primary"
+              icon="close"
+            />
+          </div>
         </div>
-        <div class="col-8" style="display: flex; justify-content: flex-end">
-          <q-btn
-            v-if="isDisable === EditMode.edit"
-            style="margin-right: 8px"
-            color="red"
-            icon="delete"
-            label="Xoá"
-          />
-          <q-btn
-            v-if="isDisable"
-            color="primary"
-            icon="update"
-            label="Cập nhật"
-          />
-        </div>
-        <div v-if="isDisable" style="position: absolute; top: 0; right: 0">
-          <q-btn
-            @click="$emit('resetGroupInfo', EditMode.default)"
-            size="x-small"
-            flat
-            round
-            color="primary"
-            icon="close"
-          />
-        </div>
-      </div>
-    </q-card-section>
-
-    <q-card-section class="q-pt-none">
-      <q-input
-        v-model="groupName"
-        :disable="!isDisable ? true : false"
-        outlined
-        placeholder="Tên nhóm *"
-      />
-    </q-card-section>
-    <q-card-section class="q-pt-none">
-      <q-input
-        v-model="groupDescription"
-        :disable="!isDisable ? true : false"
-        outlined
-        placeholder="Mô tả *"
-      />
-    </q-card-section>
-    <q-card-section v-if="isDisable === EditMode.edit">
-      <div class="row">
-        <div class="col-6">
-          <q-list bordered padding>
-            <q-item tag="label" v-ripple>
-              <q-item-section side top>
-                <q-checkbox v-model="check" />
-              </q-item-section>
-
-              <q-item-section>
-                <q-item-label class="text-h5">Trang</q-item-label>
-              </q-item-section>
-            </q-item>
-            <q-item tag="label" v-ripple>
-              <q-item-section side top>
-                <q-checkbox v-model="check1" />
-              </q-item-section>
-
-              <q-item-section>
-                <q-item-label class="text-subtitle1" style="display: flex"
-                  >Trang chủ</q-item-label
-                >
-              </q-item-section>
-            </q-item>
-
-            <q-item tag="label" v-ripple>
-              <q-item-section side top>
-                <q-checkbox v-model="check2" />
-              </q-item-section>
-
-              <q-item-section>
-                <q-item-label style="display: flex" class="text-subtitle1"
-                  >Người dùng</q-item-label
-                >
-              </q-item-section>
-            </q-item>
-
-            <q-item tag="label" v-ripple>
-              <q-item-section side top>
-                <q-checkbox v-model="check3" />
-              </q-item-section>
-
-              <q-item-section>
-                <q-item-label style="display: flex" class="text-subtitle1"
-                  >Nhóm người dùng</q-item-label
-                >
-              </q-item-section>
-            </q-item>
-          </q-list>
-        </div>
-        <div class="col-6"></div>
-      </div>
-    </q-card-section>
+      </q-card-section>
+      <q-card-section class="q-pt-none">
+        <q-input
+          :model-value="groupName"
+          :disable="!isDisable ? true : false"
+          outlined
+          @update:model-value="$emit('update:groupName', $event)"
+          placeholder="Tên nhóm *"
+          :rules="groupNameRules"
+        />
+      </q-card-section>
+      <q-card-section class="q-pt-none">
+        <q-input
+          :model-value="groupDescription"
+          :disable="!isDisable ? true : false"
+          outlined
+          @update:model-value="$emit('update:groupDescription', $event)"
+          placeholder="Mô tả *"
+        />
+      </q-card-section>
+    </q-form>
+    <q-card-section v-if="isDisable === EditMode.edit"> </q-card-section>
   </q-card>
 </template>
 

src/components/menu-list/menu-item/MenuItem.ts

 import { MenuItem } from 'src/store/authentication/state';
-import { defineComponent, PropType } from 'vue';
+import { computed, defineComponent, PropType } from 'vue';
+import { useRoute } from 'vue-router';
 export const MenuItemScript = defineComponent({
   name: 'MenuItemComponent',
   props: {
@@ -8,4 +9,16 @@ export const MenuItemScript = defineComponent({
       required: true,
     },
   },
+  setup(props) {
+    const $route = useRoute();
+    const isActive = computed(() => {
+      return (
+        props.item.children &&
+        props.item.children?.findIndex((item) => item.pageUrl === $route.path) >
+          -1
+      );
+    });
+
+    return { isActive };
+  },
 });

src/components/menu-list/menu-item/index.vue

@@ -4,6 +4,8 @@
     :label="item.pageName"
     :icon="item.pageIcon"
     :header-inset-level="item.level - 1"
+    :header-style="`margin-left: -${(item.level - 1) * 1.8}rem`"
+    :model-value="isActive"
   >
     <MenuItemComponent
       v-for="(menuItem, menuItemIdx) in item.children"
@@ -17,7 +19,10 @@
     :label="item.pageName"
     :icon="item.pageIcon"
     :header-inset-level="item.level - 1"
-    :to="item.pageUrl"
+    :header-style="`margin-left: -${(item.level - 1) * 1.8}rem`"
+    :to="item.pageUrl || '/'"
+    exact
+    active-class="bg-primary text-white"
   ></q-expansion-item>
 </template>
 

src/components/user-group/UserGroup.ts

@@ -3,12 +3,16 @@ import { computed, defineComponent, PropType, ref } from 'vue';
 import { EditMode } from 'src/assets/enums';
 // import { useStore } from 'src/store';
 
-export const UserGroupScript = defineComponent({
+export default defineComponent({
   props: {
     listUsers: {
       type: Array as PropType<GroupInfoType[]>,
       required: true,
     },
+    selectedGroupId: {
+      type: Number,
+      required: true,
+    },
   },
   emits: ['click:groupName', 'click:addNewGroupUsers'],
   setup(props) {

src/components/user-group/index.vue

@@ -3,13 +3,13 @@
     <q-card-section style="padding-top: 28px">
       <div class="row">
         <div class="col-8 text-h6" style="display: flex">
-          <div>Nhóm người dùng</div>
+          <div>{{ $t('userGroupPage.title') }}</div>
         </div>
         <div class="col-4" style="display: flex; justify-content: flex-end">
           <q-btn
             @click="$emit('click:addNewGroupUsers', EditMode.add)"
             color="primary"
-            label="Thêm mới"
+            :label="$t('crudActions.add')"
             no-caps
           />
         </div>
@@ -25,7 +25,7 @@
         v-for="(userItem, userItemIdx) in filteredListUsers"
         :key="`userItem-${userItemIdx}`"
         align="left"
-        outline
+        :outline="userItem.id !== selectedGroupId"
         size="large"
         class="full-width my-1"
         color="primary"
@@ -41,7 +41,7 @@
   </q-card>
 </template>
 
-<script lang="ts">
-import { UserGroupScript } from './UserGroup';
-export default UserGroupScript;
+<script lang="ts" src="./UserGroup.ts">
+// import { UserGroupScript } from './UserGroup';
+// export default UserGroupScript;
 </script>

src/i18n/vi/index.ts

@@ -22,4 +22,22 @@ export default {
     'msg-1': 'Lỗi không xác định',
   },
   emptyData: 'Không tìm thấy dữ liệu',
+  crudActions: {
+    add: 'Thêm mới',
+    update: 'Cập nhật',
+    delete: 'Xoá',
+    details: 'Chi tiết',
+  },
+
+  userGroupPage: {
+    title: 'Nhóm người dùng',
+    groupInfo: {
+      title: 'Thông tin nhóm',
+      validateMessages: {
+        requireGroupName: 'Vui lòng cung cấp tên nhóm người dùng',
+        groupNameLengthInvalid:
+          'Tên nhóm người dùng chỉ có thể dài tối đa 10 ký tự',
+      },
+    },
+  },
 };

src/layouts/MainLayout.vue

 <template>
-  <q-layout view="lHh Lpr lFf">
+  <q-layout view="hHh Lpr lFf">
     <q-header v-if="showHeader" elevated>
       <q-toolbar>
         <q-btn
@@ -11,9 +11,7 @@
           @click="toggleLeftDrawer"
         />
 
-        <q-toolbar-title> Quasar App </q-toolbar-title>
-
-        <div>Quasar v{{ $q.version }}</div>
+        <q-toolbar-title> VAB CMS Logo </q-toolbar-title>
       </q-toolbar>
     </q-header>
 
@@ -24,11 +22,33 @@
       bordered
       class="bg-grey-1"
     >
-      <MenuListComponent />
+      <q-scroll-area class="fit">
+        <MenuListComponent />
+      </q-scroll-area>
     </q-drawer>
 
     <q-page-container>
-      <router-view />
+      <q-page>
+        <q-scroll-area
+          class="full-width"
+          style="height: calc(100vh - 4rem) !important"
+        >
+          <div
+            class="relative-position q-pa-sm"
+            style="min-height: calc(100vh - 4rem)"
+          >
+            <router-view v-slot="{ Component }">
+              <transition
+                appear
+                enter-active-class="animated slideInUp"
+                leave-active-class="animated fadeOut absolute full-width"
+              >
+                <component :is="Component" />
+              </transition>
+            </router-view>
+          </div>
+        </q-scroll-area>
+      </q-page>
     </q-page-container>
   </q-layout>
 </template>

src/pages/nhom-nguoi-dung/UserGroup.ts

@@ -21,12 +21,19 @@ const userList: Ref<GroupInfoType[]> = ref([]);
 const isDisable = ref(EditMode.default);
 const groupName = ref('');
 const groupDescription = ref('');
-export const UserGroup = defineComponent({
+const selectedGroupId = ref(-1);
+
+const saveGroupInfo = () => {
+  //...
+};
+
+export default defineComponent({
   components: { UserGroupComponent, GroupInfoComponent },
   setup() {
     const $store = useStore();
     const getGroupInfo = (groupInfo: GroupInfoType) => {
       isDisable.value = EditMode.edit;
+      selectedGroupId.value = groupInfo.id;
       groupName.value = groupInfo.groupName;
       groupDescription.value = groupInfo.description;
     };
@@ -34,6 +41,7 @@ export const UserGroup = defineComponent({
       isDisable.value = value;
       groupName.value = '';
       groupDescription.value = '';
+      selectedGroupId.value = -1;
     };
     onMounted(async () => {
       await $store.dispatch('authentication/getListUsers').then((response) => {
@@ -52,6 +60,8 @@ export const UserGroup = defineComponent({
       changeValueIsDisable,
       groupName,
       groupDescription,
+      selectedGroupId,
+      saveGroupInfo,
     };
   },
 });

src/pages/nhom-nguoi-dung/index.vue

 <template>
-  <q-page padding>
-    <div class="row q-col-gutter-sm" align="center" justify="center">
-      <div class="col-4">
-        <UserGroupComponent
-          :list-users="userList"
-          :is-disable="isDisable"
-          @click:groupName="getGroupInfo"
-          @click:addNewGroupUsers="changeValueIsDisable"
-        ></UserGroupComponent>
-      </div>
-      <div class="col-8">
-        <GroupInfoComponent
-          :is-disable="isDisable"
-          :group-name="groupName"
-          :group-description="groupDescription"
-          @resetGroupInfo="changeValueIsDisable"
-        ></GroupInfoComponent>
-      </div>
+  <div class="row q-col-gutter-sm q-pa-sm" align="center" justify="center">
+    <div class="col-4">
+      <UserGroupComponent
+        :list-users="userList"
+        :is-disable="isDisable"
+        :selected-group-id="selectedGroupId"
+        @click:groupName="getGroupInfo"
+        @click:addNewGroupUsers="changeValueIsDisable"
+      ></UserGroupComponent>
     </div>
-  </q-page>
+    <div class="col-8">
+      <GroupInfoComponent
+        :is-disable="isDisable"
+        v-model:group-name="groupName"
+        v-model:group-description="groupDescription"
+        @resetGroupInfo="changeValueIsDisable"
+        @saveGroupInfo="saveGroupInfo"
+      ></GroupInfoComponent>
+    </div>
+  </div>
 </template>
-<script lang="ts">
-import { UserGroup } from './UserGroup';
-export default UserGroup;
+<script lang="ts" src="./UserGroup.ts">
+// import { UserGroup } from './UserGroup';
+// export default UserGroup;
 </script>