Groups

bilhed-admin-front/package.json

@@ -11,14 +11,14 @@
     "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore"
   },
   "dependencies": {
-    "@josempgon/vue-keycloak": "^3.1.1",
+    "@josempgon/vue-keycloak": "^3.3.1",
     "axios": "^1.3.6",
-    "bootstrap": "^5.2.3",
-    "bootstrap-icons": "^1.10.5",
+    "bootstrap": "^5.3.7",
+    "bootstrap-icons": "^1.13.1",
     "dayjs": "^1.11.7",
     "deep-equal": "^2.2.3",
     "file-saver": "^2.0.5",
-    "keycloak-js": "^21.1.1",
+    "keycloak-js": "^26.2.0",
     "vue": "^3.3.4",
     "vue-router": "^4.2.0",
     "vue3-toastify": "^0.2.2"

bilhed-admin-front/src/assets/main.css

@@ -1,3 +1,27 @@
 #app {
   margin-top: 65px;
+}
+.table-transparent, .table-transparent td, .table-transparent th {
+  background-color: transparent!important;
+}
+button.btn-sm.icon-small {
+  padding: 0;
+  color: #212529;
+  line-height: 0;
+  vertical-align: text-top;
+}
+.transition-icon {
+  transition: transform 0.3s ease;
+}
+.rotate-180 {
+  transform: rotate(180deg);
+}
+.btn.no-pointer-events {
+  pointer-events: none;
+  cursor: default;
+}
+.break-email {
+  word-break: break-word;
+  overflow-wrap: break-word;
+  line-break: anywhere;
 }

bilhed-admin-front/src/components/AttendeesFilter.vue → bilhed-admin-front/src/components/PersonsFilter.vue

@@ -24,7 +24,16 @@
       </select>
     </div>
 
-    <div class="col-12">
+    <div class="col-12" v-if="status === PersonStatus.PARTICIPANT">
+      <label class="form-label" for="pass">Drawn</label>
+      <select class="form-select" id="pass" v-model="f.drawn">
+        <option :value="undefined"></option>
+        <option value="true">Yes</option>
+        <option value="false">No</option>
+      </select>
+    </div>
+
+    <div class="col-12" v-if="status === PersonStatus.ATTENDEE">
       <label class="form-label" for="pass">Payed</label>
       <select class="form-select" id="pass" v-model="f.payed">
         <option :value="undefined"></option>
@@ -34,23 +43,33 @@
     </div>
 
     <div class="col-12 no-label">
-      <button type="submit" class="btn btn-primary">Search</button>
+      <button type="submit" class="btn btn-primary" :disabled="loading">
+        <span class="spinner-border spinner-border-sm" aria-hidden="true" v-if="loading"></span>
+        Search</button>
     </div>
 
   </form>
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue'
-import type { PropType } from 'vue'
-import type { AttendeeFilter } from '@/dto/AttendeeFilter'
+import type {PropType} from 'vue'
+import {defineComponent} from 'vue'
+import type {PersonFilter} from '@/dto/PersonFilter'
+import {PersonStatus} from "@/dto/Person";
 
 
 export default defineComponent({
-  name: "AttendeesFilter",
+  name: "PersonsFilter",
+  computed: {
+    PersonStatus() {
+      return PersonStatus
+    }
+  },
 
   props: {
-    filter: { type: Object as PropType<AttendeeFilter>, required: true },
+    filter: { type: Object as PropType<PersonFilter>, required: true },
+    status: { type: String as PropType<PersonStatus>, required: true },
+    loading: { type: Boolean, required: true },
   },
   emits: ['filter'],