feat(ui): Allow assigning other users (if you have the permission).

package.json

@@ -22,9 +22,8 @@
     "@quasar/quasar-ui-qcalendar": "^4.0.0-beta.10"
   },
   "devDependencies": {
-    "@flaschengeist/api": "^1.0.0-alpha.6",
+    "@flaschengeist/api": "^1.0.0-alpha.7",
-    "@flaschengeist/types": "^1.0.0-alpha.9",
+    "@flaschengeist/types": "^1.0.0-alpha.10",
-    "@quasar/app": "^3.2.3",
     "quasar": "^2.3.3",
     "axios": "^0.24.0",
     "prettier": "^2.5.0",

src/components/overview/slots/JobSlot.vue

@@ -13,18 +13,44 @@
     <div>
       <q-select
         :model-value="modelValue.services"
+        :disable="!canAssignOther || modelValue.locked"
+        :options="options"
+        option-value="userid"
         filled
-        :option-label="(opt) => userDisplay(opt)"
         multiple
-        disable
+        use-input
-        use-chips
-        stack-label
         label="Dienste"
+        behavior="dialog"
         class="col-auto q-px-xs"
-        style="font-size: 6px"
+        @filter="filterUsers"
-        counter
+        @add="({ value }) => assign(value)"
-        :max-values="modelValue.required_services"
+        @remove="({ value }) => unassign(value)"
       >
+        <template #selected-item="{ opt, toggleOption }">
+          <service-user-chip :model-value="opt" removeable @remove="toggleOption" />
+        </template>
+        <template #option="{ opt, itemProps }">
+          <q-item v-bind="itemProps">
+            <q-item-section avatar>
+              <user-avatar :model-value="opt.userid" />
+            </q-item-section>
+            <q-item-section>{{ userDisplay(opt.userid) }}</q-item-section>
+            <q-item-section style="max-width: 10em" side>
+              <q-input
+                v-model.number="opt.value"
+                type="number"
+                min="0"
+                step="0.25"
+                dense
+                filled
+                @click.stop=""
+              />
+            </q-item-section>
+            <q-item-section side>
+              <q-toggle v-model="opt.is_backup" label="Backup" left-label />
+            </q-item-section>
+          </q-item>
+        </template>
       </q-select>
       <div class="row col-12 justify-end">
         <q-btn
@@ -32,7 +58,7 @@
           flat
           color="primary"
           label="Eintragen"
-          @click="assignJob()"
+          @click="assign()"
         />
         <q-btn v-if="isEnrolled && !modelValue.locked" flat color="secondary" label="Optionen">
           <q-menu auto-close>
@@ -43,8 +69,18 @@
               <q-item clickable @click="transfer">
                 <q-item-section>Tauschen</q-item-section>
               </q-item>
+              <q-item v-if="isBackup" clickable @click="backup(false)">
+                <q-tooltip>Backup zu vollem Dienst machen</q-tooltip>
+                <q-item-section>Dienst</q-item-section>
+                <q-item-section side><q-icon name="mdi-eye" /></q-item-section>
+              </q-item>
+              <q-item v-else clickable @click="backup(true)">
+                <q-tooltip>Nur als Backup eintragen</q-tooltip>
+                <q-item-section>Backup</q-item-section>
+                <q-item-section side><q-icon name="mdi-eye-off" /></q-item-section>
+              </q-item>
               <q-separator />
-              <q-item clickable @click="assignJob(false)">
+              <q-item clickable @click="unassign()">
                 <q-item-section class="text-negative">Austragen</q-item-section>
               </q-item>
             </q-list>
@@ -56,14 +92,19 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, onBeforeMount, computed, PropType } from 'vue';
 import { date, useQuasar } from 'quasar';
-import { asHour, useMainStore, useUserStore } from '@flaschengeist/api';
+import { defineComponent, onBeforeMount, computed, ref, PropType } from 'vue';
+import { asHour, hasPermission, useMainStore, useUserStore } from '@flaschengeist/api';
 import { useEventStore } from '../../../store';
+import { PERMISSIONS } from '../../../permissions';
+
 import TransferInviteDialog from './TransferInviteDialog.vue';
+import ServiceUserChip from './ServiceUserChip.vue';
+import { UserAvatar } from '@flaschengeist/api/components';
 
 export default defineComponent({
   name: 'JobSlot',
+  components: { ServiceUserChip, UserAvatar },
   props: {
     modelValue: {
       required: true,
@@ -81,31 +122,42 @@ export default defineComponent({
     const userStore = useUserStore();
     const quasar = useQuasar();
 
-    onBeforeMount(async () => userStore.getUsers());
+    // Make sure users are loaded if we can assign them
+    onBeforeMount(async () => await userStore.getUsers());
 
-    function userDisplay(service: FG.Service) {
+    /* Stuff used for general display */
-      return userStore.findUser(service.userid)?.display_name || service.userid;
+    // Get displayname of user
+    function userDisplay(id: string) {
+      return userStore.findUser(id)?.display_name || id;
     }
 
+    // The name of the current job
     const typeName = computed(() =>
       typeof props.modelValue.type === 'object'
         ? props.modelValue.type.name
-        : store.jobTypes.find((j) => j.id === props.modelValue.type)?.name || 'Unbekannter Diensttyp'
+        : store.jobTypes.find((j) => j.id === props.modelValue.type)?.name ||
+          'Unbekannter Diensttyp'
     );
 
-    const isEnrolled = computed(
+    // The service of the current user if self assigned to the job
-      () =>
+    const service = computed(() =>
-        props.modelValue.services.findIndex(
+      props.modelValue.services.find((service) => service.userid == mainStore.currentUser.userid)
-          (service) => service.userid == mainStore.currentUser.userid
-        ) !== -1
     );
 
+    // Weather the current user is assigned to the job
+    const isEnrolled = computed(() => service.value !== undefined);
+
+    // If the job has enough assigned services
     const isFull = computed(
       () =>
         props.modelValue.services.map((s) => s.value).reduce((p, c) => p + c, 0) >=
         props.modelValue.required_services
     );
 
+    // If current user is only backup service
+    const isBackup = computed(() => service.value?.is_backup || false);
+
+    // If it is still possible to invite other users (= job is today or in the future)
     const canInvite = computed(
       () =>
         (props.modelValue.end || props.modelValue.start) >
@@ -115,14 +167,15 @@ export default defineComponent({
         )
     );
 
-    async function assignJob(assign = true) {
+    // Assign user to a job
-      const newService: FG.Service = {
+    async function assign(service?: FG.Service) {
+      service = service || {
         userid: mainStore.currentUser.userid,
         is_backup: false,
-        value: assign ? 1 : -1,
+        value: 1,
       };
       try {
-        const job = await store.assignToJob(props.modelValue.id, newService);
+        const job = await store.assignToJob(props.modelValue.id, service);
         emit('update:modelValue', job);
       } catch (error) {
         console.warn(error);
@@ -137,6 +190,7 @@ export default defineComponent({
       }
     }
 
+    // open invite dialog (or transfer)
     function invite(isInvite = true) {
       quasar.dialog({
         component: TransferInviteDialog,
@@ -147,15 +201,72 @@ export default defineComponent({
       });
     }
 
+    /* Stuff needed if we can assign other user */
+    // Current user can assign other users
+    const canAssignOther = computed(() => hasPermission(PERMISSIONS.ASSIGN_OTHER));
+
+    // options shown in the select
+    const options = ref([] as FG.Service[]);
+
+    // users which are available (e.g. not already assigned)
+    const freeUsers = computed(() =>
+      userStore.users.filter((u) => props.modelValue.services.every((s) => s.userid !== u.userid))
+    );
+
+    // used to filter options based on user input
+    function filterUsers(
+      input: string,
+      doneFn: (
+        callbackFn: () => void,
+        afterFn?: (ref: { [index: string]: unknown }) => void
+      ) => void,
+      abortFn: () => void
+    ) {
+      if (freeUsers.value.length == 0) return abortFn();
+
+      // Filter the options
+      doneFn(() => {
+        // Skip filter options if input is too short
+        if (!input || input.length < 2) {
+          options.value = freeUsers.value.map<FG.Service>((u) => ({
+            userid: u.userid,
+            value: 1,
+            is_backup: false,
+          }));
+          return;
+        }
+        // Search matching string within all names
+        options.value = freeUsers.value
+          .filter((u) =>
+            input
+              .toLowerCase()
+              .split(' ')
+              .every(
+                (needle) =>
+                  u.display_name.toLowerCase().indexOf(needle) > -1 ||
+                  u.firstname.toLowerCase().indexOf(needle) > -1 ||
+                  u.lastname.toLowerCase().indexOf(needle) > -1
+              )
+          )
+          .map<FG.Service>((u) => ({ userid: u.userid, value: 1, is_backup: false }));
+      });
+    }
+
     return {
-      assignJob,
+      assign,
+      unassign: (s?: FG.Service) => assign(Object.assign({}, s || service.value, { value: -1 })),
+      backup: (is_backup: boolean) => assign(Object.assign({}, service.value, { is_backup })),
+      canAssignOther,
       canInvite,
+      filterUsers,
+      isBackup,
       isEnrolled,
       isFull,
       invite: () => invite(true),
       transfer: () => invite(false),
       typeName,
       userDisplay,
+      options,
       asHour,
     };
   },

src/components/overview/slots/ServiceUserChip.vue

@@ -0,0 +1,67 @@
+<template>
+  <q-chip
+    :removable="removeable"
+    :color="modelValue.is_backup ? 'grey' : undefined"
+    @remove="remove"
+  >
+    <q-tooltip>{{ displayName }} ({{ serviceValue }}x)</q-tooltip>
+    <user-avatar :model-value="modelValue.userid">
+      <slot v-if="modelValue.is_backup">
+        <q-icon v-if="modelValue.is_backup" name="mdi-eye-off" />
+      </slot>
+    </user-avatar>
+    <div class="ellipsis">{{ displayName }}</div>
+    <q-badge v-if="modelValue.value !== 1" :label="serviceValue" style="margin-left: 0.25em" />
+    <slot />
+  </q-chip>
+</template>
+
+<script lang="ts">
+import { useUserStore } from '@flaschengeist/api';
+import { PropType, computed, defineComponent, onBeforeMount, ref, watch } from 'vue';
+
+import { UserAvatar } from '@flaschengeist/api/components';
+
+export default defineComponent({
+  name: 'ServiceUserChip',
+  components: { UserAvatar },
+  props: {
+    modelValue: {
+      type: Object as PropType<FG.Service>,
+      required: true,
+    },
+    removeable: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  emits: ['remove'],
+  setup(props, { emit }) {
+    const userStore = useUserStore();
+
+    const user = ref<FG.User>();
+
+    onBeforeMount(async () => {
+      user.value = await userStore.getUser(props.modelValue.userid);
+    });
+
+    watch(
+      () => props.modelValue,
+      async () => (user.value = await userStore.getUser(props.modelValue.userid))
+    );
+
+    const displayName = computed(() => user.value?.display_name || '...');
+    const serviceValue = computed(() =>
+      props.modelValue.value.toFixed(Number.isInteger(props.modelValue.value) ? 0 : 1)
+    );
+
+    return {
+      displayName,
+      remove: () => emit('remove', props.modelValue),
+      serviceValue,
+    };
+  },
+});
+</script>
+
+<style></style>