implement advanced availability logic

Reviewed-on: kompetenzinventar/ki-frontend#49

.drone.yml

@@ -20,3 +20,6 @@ steps:
       from_secret: "docker_username"
     password:
       from_secret: "docker_password"
+  when:
+    branch:
+      - main

src/components/profile/Section.vue

@@ -10,7 +10,7 @@ SPDX-License-Identifier: AGPL-3.0-or-later
       {{ title }}
     </h3>
     <div class="card w-100">
-      <div class="card-body lh-1">
+      <div class="card-body">
         <slot></slot>
       </div>
     </div>

src/store/profile.js

@@ -54,17 +54,20 @@ export default {
     }
   },
   actions: {
-    onError({commit}) {
+    onError({commit, dispatch}) {
       commit('setError')
-      commit('clearProfileId')
-      commit('clearProfile')
-      commit('setNotLoading')
-      commit('hideSpinner')
+      dispatch('clear')
     },
     onNotFound({commit, dispatch}) {
       dispatch('onError')
       commit('setNotFound', true)
     },
+    clear({commit}) {
+      commit('clearProfileId')
+      commit('clearProfile')
+      commit('hideSpinner')
+      commit('setNotLoading')
+    },
     async load({state, commit, dispatch, rootState}, profileId) {
       if (state.loading) {
         return
@@ -111,7 +114,7 @@ export default {
       const responseData = await response.json()
       commit('setProfile', responseData.profile)
       commit('hideSpinner')
-      commit('setNotSearching')
+      commit('setNotLoading')
     }
   }
 }

src/views/profile/Edit.vue

@@ -98,17 +98,36 @@ SPDX-License-Identifier: AGPL-3.0-or-later
         @update-values="profile.searchtopics = $event"
       ></auto-complete>
 
-      <div class="col-12 col-xs-12">
-        <label for="availability" class="form-label fw-bold"
-          >Ich bin für Anfragen verfügbar:</label
-        >
+      <Section title="Verfügbarkeit">
+        <div class="form-check mb-3">
+          <input 
+            v-model="profile.availability_status"
+            class="form-check-input me-2" 
+            type="checkbox" 
+            id="availability_status">
+          <label class="form-check-label" for="availability_status">
+            Ich bin aktuell verfügbar
+          </label>
+        </div>
+        <div class="mb-3" v-if="profile.availability_status">
+          <label class="form-label">
+            Stunden pro Woche
+          </label>
+          <input 
+            v-model="profile.availability_hours_per_week" 
+            type="number" 
+            class="form-control">
+        </div>
+        <label for="availability" class="form-label">
+          Anmerkungen
+        </label>
         <textarea
           class="form-control"
           id="availability"
           rows="3"
-          v-model="profile.availability"
+          v-model="profile.availability_text"
         ></textarea>
-      </div>
+      </Section>
 
       <auto-complete
         type="contacttype"
@@ -171,12 +190,14 @@ SPDX-License-Identifier: AGPL-3.0-or-later
 import RequestMixin from "@/mixins/request.mixin"
 
 import AutoComplete from "@/components/AutoComplete";
+import Section from '@/components/profile/Section'
 
 export default {
   name: "profileEdit",
   mixins: [RequestMixin],
   components: {
     AutoComplete,
+    Section,
   },
   data() {
     return {
@@ -188,7 +209,9 @@ export default {
         pronouns: "",
         volunteerwork: "",
         freetext: "",
-        availability: "",
+        availability_status: false,
+        availability_hours_per_week: null,
+        availability_text: "",
         address: {
           postcode: "",
           city: "",

src/views/profile/View.vue

@@ -55,10 +55,28 @@ SPDX-License-Identifier: AGPL-3.0-or-later
         </div>
       </Section>
 
-      <Section
-        v-if="profile.availability"
-        title="Verfügbarkeit">
-        <div class="lh-base">{{ profile.availability }}</div>
+      <Section title="Verfügbarkeit">
+        <div class="d-flex align-items-center">
+          <div v-if="profile.availability_status">
+            <i class="bi bi-check-square me-1"></i>
+            ja
+          </div>
+          <div v-else>
+            <i class="bi bi-x-square me-1"></i>
+            nein
+          </div>
+          <span 
+            class="ms-3" 
+            v-if="profile.availability_status && profile.availability_hours_per_week">
+            ({{ profile.availability_hours_per_week }} Stunden pro Woche)
+          </span>
+        </div>
+        <div v-if="profile.availability_text" class="mt-3">
+          <label class="form-label fw-bold">
+            Anmerkungen
+          </label>
+          <div>{{ profile.availability_text }}</div>
+        </div>
       </Section>
 
       <Section
@@ -112,7 +130,8 @@ export default {
   },
   methods: {
     ...mapActions({
-      load: 'profile/load'
+      loadProfile: 'profile/load',
+      clearStore: 'profile/clear',
     })
   },
   computed: {
@@ -126,8 +145,11 @@ export default {
   },
   async created() {
     const id = parseInt(this.$route.params.memberId, 10)
-    this.load(id)
-  }
+    this.loadProfile(id)
+  },
+  unmounted() {
+    this.clearStore()
+  },
 };
 </script>