fixed #200

src/api/models/Team.js

@@ -6,8 +6,10 @@ export default class TeamAPI extends APIRepository {
     super('teams', appApi, '/lma/teams')
     this.APIAdresses = {
       base: '/lma/teams',
+      classroomTeamsWithJoinStatus: '/lma/teams/classroom_teams_with_join_status',
       myLeadingTeams: '/lma/teams/my_leading_teams',
       byId: (id) => '/lma/teams/' + id,
+      register: (id) => '/lma/teams/' + id + '/register',
       registrations: (id) => '/lma/teams/' + id + '/registrations'
     }
     this.CacheList = {
@@ -32,4 +34,18 @@ export default class TeamAPI extends APIRepository {
       }
     })
   }
+
+  register (teamId) {
+    return this.sendRequest({
+      apiMethod: 'put',
+      api: this.api,
+      request: this.APIAdresses.register(teamId),
+      resolveCallback: (response) => {
+        return response.data
+      },
+      rejectCallback: (error) => {
+        return error
+      }
+    })
+  }
 }

src/components/Widgets/Classroom/AdminClassroomShow/components/TeamList.vue

@@ -12,7 +12,6 @@
     <template #toolbar>
       <q-btn color="primary"
              outline
-             :loading="exportReportLoading"
              :to="{name: 'Admin.Classroom.Team.Create', params: {classroom_id: classroomId}}">
         ایجاد گروه جدید
       </q-btn>
@@ -27,7 +26,6 @@
                  color="primary"
                  label="جزییات"
                  :to="{name: 'Admin.Classroom.Team.Show', params: {classroom_id: classroomId, team_id:inputData.props.row.id}}"
-                 :loading="createInvoiceLoading"
                  class="q-mr-md" />
           <delete-btn @click="showConfirmRemoveDialog(inputData.props.row, 'id', getRemoveMessage(inputData.props.row))" />
         </div>
@@ -45,7 +43,6 @@
 <script>
 import { EntityIndex } from 'quasar-crud'
 import { APIGateway } from 'src/api/APIGateway.js'
-import { Classroom } from 'src/models/Classroom.js'
 import { FormBuilderAssist } from 'quasar-form-builder'
 import DeleteBtn from 'src/components/Control/DeleteBtn.vue'
 
@@ -65,11 +62,7 @@ export default {
     const classroomId = this.classroomId
     return {
       mounted: false,
-      createInvoiceLoading: false,
-      classroom: new Classroom(),
 
-      dropClassroomByAdminLoading: false,
-      exportReportLoading: false,
       teamsListInputs: [
         { type: 'hidden', name: 'classroom', value: classroomId }
       ],

src/models/Team.js

@@ -0,0 +1,56 @@
+import { User } from 'src/models/User.js'
+import { Collection, Model } from 'js-abstract-model'
+
+class Team extends Model {
+  constructor (data) {
+    super(data, [
+      { key: 'id' },
+      { key: 'title' },
+      { key: 'capacity' },
+      { key: 'used_capacity' },
+      { key: 'description' },
+      { key: 'is_active' },
+      { key: 'is_deleted' },
+      { key: 'join_status' },
+      { key: 'classroom' },
+      { key: 'leader' },
+      {
+        key: 'leader_info',
+        relatedModel: User
+      },
+      { key: 'creation_time' },
+      { key: 'last_modification_time' }
+    ], {
+      join_status: {
+        infoKey: 'join_status_info',
+        enumListKey: 'join_statusEnums',
+        enums: [
+          {
+            label: 'فعال',
+            value: 'ENABLED'
+          },
+          {
+            label: 'ظرفیت تکمیل',
+            value: 'FULL'
+          },
+          {
+            label: 'عضویت توسط ادمین',
+            value: 'DISABLED'
+          },
+          {
+            label: 'عضوهستید',
+            value: 'JOINED'
+          }
+        ]
+      }
+    })
+  }
+}
+
+class TeamList extends Collection {
+  model () {
+    return Team
+  }
+}
+
+export { Team, TeamList }

src/pages/User/Profile/classroomInfo.vue

@@ -21,6 +21,9 @@
       <q-tab v-if="canShowOtherTabsOfClassroom"
              name="educations"
              label="جدول آموزشی" />
+      <q-tab v-if="canShowOtherTabsOfClassroom"
+             name="team"
+             label="گروه" />
       <q-tab v-if="canShowOtherTabsOfClassroom"
              name="movies1"
              label="آزمون" />
@@ -87,6 +90,44 @@
         </entity-index>
       </q-tab-panel>
 
+      <q-tab-panel name="team"
+                   class="q-pa-none">
+        <entity-index v-if="mounted"
+                      ref="teamsList"
+                      v-model:value="teamsListInputs"
+                      title="لیست گروه ها"
+                      :api="teamsListApi"
+                      :table="teamsListTable"
+                      :table-keys="teamsListTableKeys"
+                      :show-search-button="false"
+                      :show-reload-button="false"
+                      :show-expand-button="false">
+          <template v-slot:entity-index-table-cell="{inputData}">
+            <template v-if="inputData.col.name === 'number'">
+              {{ inputData.rowNumber }}
+            </template>
+            <template v-else-if="inputData.col.name === 'action'">
+              <div class="action-column-entity-index">
+                <q-btn size="md"
+                       color="primary"
+                       :flat="inputData.props.row.join_status !== 'ENABLED'"
+                       :disable="inputData.props.row.join_status !== 'ENABLED'"
+                       :label="getTeamJoinStatusLabel(inputData.props.row)"
+                       class="q-mr-md"
+                       :loading="joinTeamLoading"
+                       @click="joinTeam(inputData.props.row)" />
+              </div>
+            </template>
+            <template v-else>
+              {{ inputData.col.value }}
+            </template>
+          </template>
+        </entity-index>
+        <q-skeleton v-else
+                    type="rect"
+                    height="200px" />
+      </q-tab-panel>
+
       <q-tab-panel name="movies1">
         آزمون
       </q-tab-panel>
@@ -165,6 +206,7 @@ import Breadcrumbs from 'src/components/Widgets/Breadcrumbs/Breadcrumbs.vue'
 import { ProjectAttendanceSheets } from 'src/models/ProjectAttendanceSheets.js'
 import { SessionAttendanceSheets } from 'src/models/SessionAttendanceSheets.js'
 import ShowClassroomInfo from 'src/components/Widgets/Other/ShowClassroomInfo/ShowClassroomInfo.vue'
+import { Team } from 'src/models/Team'
 
 export default {
   name: 'UserPanel.Profile.ClassroomInfo',
@@ -377,10 +419,80 @@ export default {
       },
 
       registrations: new RegistrationList(),
-      classroomRegistration: new Registration()
+      classroomRegistration: new Registration(),
+
+      joinTeamLoading: false,
+      teamsListInputs: [
+        { type: 'hidden', name: 'classroom', value: classroomId }
+      ],
+      teamsListApi: APIGateway.team.APIAdresses.classroomTeamsWithJoinStatus,
+      teamsListTable: {
+        columns: [
+          {
+            name: 'number',
+            required: true,
+            label: 'شماره',
+            align: 'left',
+            field: () => ''
+          },
+          {
+            name: 'id',
+            required: true,
+            label: 'شناسه',
+            align: 'left',
+            field: row => row.id
+          },
+          {
+            name: 'title',
+            required: true,
+            label: 'عنوان گروه',
+            align: 'left',
+            field: row => row.title
+          },
+          {
+            name: 'leader_info',
+            required: true,
+            label: 'سرگروه',
+            align: 'left',
+            field: row => row.leader_info?.firstname + ' ' + row.leader_info?.lastname
+          },
+          {
+            name: 'used_capacity',
+            required: true,
+            label: 'ظرفیت استفاده شده',
+            align: 'left',
+            field: row => row.used_capacity
+          },
+          {
+            name: 'capacity',
+            required: true,
+            label: 'ظرفیت',
+            align: 'left',
+            field: row => row.capacity
+          },
+          {
+            name: 'action',
+            required: true,
+            label: ' ',
+            align: 'left',
+            field: ''
+          }
+        ],
+        data: []
+      },
+      teamsListTableKeys: {
+        data: 'results',
+        total: 'count',
+        currentPage: 'current',
+        perPage: 'per_page',
+        pageKey: 'page'
+      }
     }
   },
   computed: {
+    classroomId () {
+      return this.$route.params.id
+    },
     canShowOtherTabsOfClassroom () {
       return !this.classroomRegistration.loading && (this.classroomRegistration.status === 'REGISTERED' || this.classroomRegistration.status === 'ENROLLED')
     },
@@ -399,6 +511,24 @@ export default {
     this.mounted = true
   },
   methods: {
+    getTeamJoinStatusLabel (team) {
+      if (team.join_status === 'ENABLED') {
+        return 'عضو شوید'
+      }
+      return (new Team(team)).join_status_info.label
+    },
+    joinTeam (team) {
+      this.joinTeamLoading = true
+      APIGateway.team.register(team.id)
+        .then(() => {
+          this.joinTeamLoading = false
+          this.$refs.teamsList.search()
+        })
+        .catch(() => {
+          this.joinTeamLoading = false
+          this.$refs.teamsList.search()
+        })
+    },
     getRegistrationInfo () {
       this.registrations.loading = true
       this.classroomRegistration.loading = true