تغییر صفحه کلاس های کاربر

src/components/Widgets/Classroom/ClassroomList/ClassroomList.vue

@@ -88,6 +88,8 @@ export default {
       units: [],
       national_code: null,
       inputs: [
+        { type: 'hidden', name: 'classroom__unit__category', value: null },
+        { type: 'hidden', name: 'classroom__unit', value: null },
         { type: 'hidden', name: 'classroom__unit__category__type', value: 'TRAINING' },
         { type: 'hidden', name: 'owner', value: null }
       ],
@@ -198,7 +200,7 @@ export default {
   },
   watch: {
     selectedCategoryId () {
-      this.setInputValue('unit', null)
+      // this.setInputValue('unit', null)
       this.getUnits(this.selectedCategoryId)
     }
   },
@@ -210,9 +212,19 @@ export default {
     this.mounted = true
   },
   methods: {
-    onUnitCategoriesFilterChanged () {
+    onUnitCategoriesFilterChanged (selectedId) {
+      if (selectedId) {
+        this.getUnits(selectedId)
+      } else {
+        this.units = []
+      }
+      FormBuilderAssist.setAttributeByName(this.inputs, 'classroom__unit__category', 'value', selectedId)
+      FormBuilderAssist.setAttributeByName(this.inputs, 'classroom__unit', 'value', null)
+      this.search()
     },
-    onUnitsFilterChanged () {
+    onUnitsFilterChanged (selectedId) {
+      FormBuilderAssist.setAttributeByName(this.inputs, 'classroom__unit', 'value', selectedId)
+      this.search()
     },
     setClassroomTypeOfInputs () {
       FormBuilderAssist.setAttributeByName(this.inputs, 'classroom__unit__category__type', 'value', this.localOptions.classroomType)
@@ -285,7 +297,7 @@ export default {
     },
     loadInputDataOptions () {
       this.getCategories()
-      this.getUnits()
+      // this.getUnits()
     },
     getCategories () {
       APIGateway.unitCategory.index({ per_page: 9999, type: this.localOptions.classroomType })
@@ -306,7 +318,7 @@ export default {
         category__type: this.localOptions.classroomType
       })
         .then(unitList => {
-          this.loadSelectOptions('unit', this.getSelectOptions(unitList.list.list, 'id', 'title'))
+          // this.loadSelectOptions('unit', this.getSelectOptions(unitList.list.list, 'id', 'title'))
           this.units = unitList.list
         })
         .catch(() => {
@@ -345,7 +357,7 @@ export default {
 .my-container {
   :deep(.entity-index) {
     .entity-crud-formBuilder {
-      padding: 8px 0;
+      padding: 8px 0 0 8px;
     }
   }
 }

src/components/Widgets/Classroom/ClassroomList/filters.vue

@@ -1,10 +1,12 @@
 <template>
   <div class="filters">
     <div class="main-filters">
-      <div class="unitCategories">
+      <div class="unit-category-chips">
         <q-btn v-if="unitCategories?.list?.length > 0"
                flat
-               class="filter-btn unitCategory filter-btn__selected">
+               class="filter-btn unitCategory "
+               :class="{ 'filter-btn__selected': selectedUnitCategoryId===null}"
+               @click="onUnitCategoriesFilterChanged(null)">
           <div class="filter-btn-title">
             همه
           </div>
@@ -12,17 +14,20 @@
         <q-btn v-for="(unitCategory, unitCategoryIndex) in unitCategories.list"
                :key="unitCategoryIndex"
                flat
-               :to="{name: showCategoryRouteName, params: {category_id: unitCategory.id}}"
-               class="filter-btn unitCategory">
+               class="filter-btn unitCategory"
+               :class="{ 'filter-btn__selected': selectedUnitCategoryId===unitCategory.id}"
+               @click="onUnitCategoriesFilterChanged(unitCategory.id)">
           <div class="filter-btn-title">
             {{ unitCategory.title }}
           </div>
         </q-btn>
       </div>
-      <div class="unitCategories">
-        <q-btn v-if="units?.list?.length > 0"
-               flat
-               class="filter-btn unitCategory filter-btn__selected">
+      <div v-if="units?.list?.length > 0"
+           class="unit-chips">
+        <q-btn flat
+               class="filter-btn unitCategory"
+               :class="{ 'filter-btn__selected': selectedUnitId===null}"
+               @click="onUnitsFilterChanged(null)">
           <div class="filter-btn-title">
             همه
           </div>
@@ -30,41 +35,14 @@
         <q-btn v-for="(unit, unitIndex) in units.list"
                :key="unitIndex"
                flat
-               :to="{name: showCategoryRouteName, params: {category_id: unit.id}}"
-               class="filter-btn unitCategory">
+               class="filter-btn unitCategory"
+               :class="{ 'filter-btn__selected': selectedUnitId===unit.id}"
+               @click="onUnitsFilterChanged(unit.id)">
           <div class="filter-btn-title">
             {{ unit.title }}
           </div>
         </q-btn>
       </div>
-      <div class="content-type-filters" />
-    </div>
-    <div class="sub-filters">
-      <q-expansion-item v-model="subFilterExpanded"
-                        :header-style="'display: none;'">
-        <q-card class="sub-filters-card">
-          <div class="media-types">
-            <q-btn v-for="(mediaType, mediaTypeIndex) in mediaTypes"
-                   :key="mediaTypeIndex"
-                   flat
-                   class="filter-btn unitCategory"
-                   :class="{'filter-btn__selected': selectedMediaType === mediaType.value}"
-                   @click="filterMediaType(mediaType.value)">
-              <div class="filter-btn-title">
-                {{ mediaType.label }}
-              </div>
-            </q-btn>
-          </div>
-          <div class="search-input">
-            <q-input v-model="searchText"
-                     debounce="500">
-              <template #prepend>
-                <q-icon name="search" />
-              </template>
-            </q-input>
-          </div>
-        </q-card>
-      </q-expansion-item>
     </div>
   </div>
 </template>
@@ -98,12 +76,13 @@ export default {
       default: 'category_parent_parent'
     }
   },
-  emits: ['filter'],
+  emits: ['onUnitCategoriesFilterChanged', 'onUnitsFilterChanged'],
   data () {
     return {
       media: new Media(),
       searchText: null,
-      selectedMediaType: null,
+      selectedUnitCategoryId: null,
+      selectedUnitId: null,
       subFilterExpanded: false
     }
   },
@@ -141,6 +120,14 @@ export default {
       this.selectedMediaType = mediaType
       this.emitFilters()
     },
+    onUnitsFilterChanged (selectedId) {
+      this.selectedUnitId = selectedId
+      this.$emit('onUnitsFilterChanged', selectedId)
+    },
+    onUnitCategoriesFilterChanged (selectedId) {
+      this.selectedUnitCategoryId = selectedId
+      this.$emit('onUnitCategoriesFilterChanged', selectedId)
+    },
     emitFilters () {
       this.$emit('filter', this.getFilterObject())
     },
@@ -162,8 +149,9 @@ export default {
     gap: 8px;
     flex-wrap: wrap;
     justify-content: space-between;
+    margin-bottom: 12px;
 
-    .unitCategories {
+    .unit-category-chips {
       display: flex;
       gap: 8px;
       flex-wrap: nowrap;
@@ -173,25 +161,15 @@ export default {
       scrollbar-width: none; // فایرفاکس
       -ms-overflow-style: none; // IE و Edge قدیمی
     }
-    .content-type-filters {
-
-    }
-  }
-  .sub-filters {
-    .sub-filters-card {
+    .unit-chips {
       display: flex;
       gap: 8px;
-      flex-wrap: wrap;
-      align-items: center;
-      justify-content: space-between;
-      padding-top: 12px;
-      .media-types {
-        display: flex;
-        gap: 8px;
-        flex-wrap: wrap;
-        justify-content: flex-start;
-        height: 42.63px;
-      }
+      flex-wrap: nowrap;
+      max-width: 100%;
+      overflow-x: auto;
+      justify-content: flex-start;
+      scrollbar-width: none; // فایرفاکس
+      -ms-overflow-style: none; // IE و Edge قدیمی
     }
   }
   .filter-btn {
@@ -201,7 +179,7 @@ export default {
     justify-content: space-between;
     align-items: center;
     background: #FFFFFF;
-    height: 43px;
+    height: 40px;
     padding: 0 8px;
     white-space: nowrap;
     .filter-btn-title {