Merge pull request #2626 from gradido/2616-There-is-no-message-when-a-month-is-fully-created

refactor(frontend): there is no message when a month is fully created

frontend/src/components/Contributions/ContributionForm.vue

@@ -3,7 +3,7 @@
     <b-form
       ref="form"
       @submit.prevent="submit"
-      class="p-3 bg-white appBoxShadow gradido-border-radius"
+      class="form-style p-3 bg-white appBoxShadow gradido-border-radius"
     >
       <label>{{ $t('contribution.selectDate') }}</label>
       <b-form-datepicker
@@ -23,50 +23,70 @@
         <template #nav-next-year><span></span></template>
       </b-form-datepicker>
 
-      <input-textarea
-        id="contribution-memo"
-        v-model="form.memo"
-        :name="$t('form.message')"
-        :label="$t('contribution.activity')"
-        :placeholder="$t('contribution.yourActivity')"
-        :rules="{ required: true, min: 5, max: 255 }"
-      />
-      <input-hour
-        v-model="form.hours"
-        :name="$t('form.hours')"
-        :label="$t('form.hours')"
-        placeholder="0.25"
-        :rules="{
-          required: true,
-          min: 0.25,
-          max: validMaxTime,
-          gddCreationTime: [0.25, validMaxTime],
-        }"
-        :validMaxTime="validMaxTime"
-        @updateAmount="updateAmount"
-      ></input-hour>
-      <input-amount
-        id="contribution-amount"
-        v-model="form.amount"
-        :name="$t('form.amount')"
-        :label="$t('form.amount')"
-        placeholder="20"
-        :rules="{ required: true, gddSendAmount: [20, validMaxGDD] }"
-        typ="ContributionForm"
-      ></input-amount>
+      <div
+        v-if="(isThisMonth && maxGddThisMonth <= 0) || (!isThisMonth && maxGddLastMonth <= 0)"
+        class="p-3"
+      >
+        {{ noOpenCreation }}
+      </div>
+      <div v-else>
+        <input-textarea
+          id="contribution-memo"
+          v-model="form.memo"
+          :name="$t('form.message')"
+          :label="$t('contribution.activity')"
+          :placeholder="$t('contribution.yourActivity')"
+          :rules="{ required: true, min: 5, max: 255 }"
+        />
+        <input-hour
+          v-model="form.hours"
+          :name="$t('form.hours')"
+          :label="$t('form.hours')"
+          placeholder="0.25"
+          :rules="{
+            required: true,
+            min: 0.25,
+            max: validMaxTime,
+            gddCreationTime: [0.25, validMaxTime],
+          }"
+          :validMaxTime="validMaxTime"
+          @updateAmount="updateAmount"
+        ></input-hour>
+        <input-amount
+          id="contribution-amount"
+          v-model="form.amount"
+          :name="$t('form.amount')"
+          :label="$t('form.amount')"
+          placeholder="20"
+          :rules="{ required: true, gddSendAmount: [20, validMaxGDD] }"
+          typ="ContributionForm"
+        ></input-amount>
 
-      <b-row class="mt-5">
-        <b-col>
-          <b-button type="reset" variant="secondary" @click="reset" data-test="button-cancel">
-            {{ $t('form.cancel') }}
-          </b-button>
-        </b-col>
-        <b-col class="text-right">
-          <b-button type="submit" variant="gradido" :disabled="disabled" data-test="button-submit">
-            {{ form.id ? $t('form.change') : $t('contribution.submit') }}
-          </b-button>
-        </b-col>
-      </b-row>
+        <b-row class="mt-5">
+          <b-col cols="12" lg="6">
+            <b-button
+              block
+              type="reset"
+              variant="secondary"
+              @click="reset"
+              data-test="button-cancel"
+            >
+              {{ $t('form.cancel') }}
+            </b-button>
+          </b-col>
+          <b-col cols="12" lg="6" class="text-right mt-4 mt-lg-0">
+            <b-button
+              block
+              type="submit"
+              variant="gradido"
+              :disabled="disabled"
+              data-test="button-submit"
+            >
+              {{ form.id ? $t('form.change') : $t('contribution.submit') }}
+            </b-button>
+          </b-col>
+        </b-row>
+      </div>
     </b-form>
   </div>
 </template>
@@ -133,6 +153,18 @@ export default {
     validMaxTime() {
       return Number(this.validMaxGDD / 20)
     },
+    noOpenCreation() {
+      if (this.maxGddThisMonth <= 0 && this.maxGddLastMonth <= 0) {
+        return this.$t('contribution.noOpenCreation.allMonth')
+      }
+      if (this.isThisMonth && this.maxGddThisMonth <= 0) {
+        return this.$t('contribution.noOpenCreation.thisMonth')
+      }
+      if (!this.isThisMonth && this.maxGddLastMonth <= 0) {
+        return this.$t('contribution.noOpenCreation.lastMonth')
+      }
+      return ''
+    },
   },
   watch: {
     value() {
@@ -142,6 +174,9 @@ export default {
 }
 </script>
 <style>
+.form-style {
+  min-height: 410px;
+}
 span.errors {
   color: red;
 }

frontend/src/locales/de.json

@@ -57,7 +57,16 @@
       "yourContribution": "Dein Beitrag zum Gemeinwohl"
     },
     "lastContribution": "Letzte Beiträge",
+    "noContributions": {
+      "allContributions": "Es wurden noch keine Beiträge eingereicht.",
+      "myContributions": "Du hast noch keine Beiträge eingereicht."
+    },
     "noDateSelected": "Wähle irgendein Datum im Monat",
+    "noOpenCreation": {
+      "allMonth": "Für alle beiden Monate ist dein Schöpfungslimit erreicht. Den Nächsten Monat kannst du wieder 1000 GDD Schöpfen.",
+      "lastMonth": "Für den ausgewählten Monat ist das Schöpfungslimit erreicht.",
+      "thisMonth": "Für den aktuellen Monat ist das Schöpfungslimit erreicht."
+    },
     "selectDate": "Wann war dein Beitrag?",
     "submit": "Einreichen",
     "submitted": "Der Beitrag wurde eingereicht.",

frontend/src/locales/en.json

@@ -57,7 +57,16 @@
       "yourContribution": "Your Contributions to the Common Good"
     },
     "lastContribution": "Last Contributions",
+    "noContributions": {
+      "allContributions": "No contributions have been submitted yet.",
+      "myContributions": "You have not submitted any entries yet."
+    },
     "noDateSelected": "Choose any date in the month",
+    "noOpenCreation": {
+      "allMonth": "For all two months your creation limit is reached. The next month you can create 1000 GDD again.",
+      "lastMonth": "The creation limit is reached for the selected month.",
+      "thisMonth": "The creation limit has been reached for the current month."
+    },
     "selectDate": "When was your contribution?",
     "submit": "Submit",
     "submitted": "The contribution was submitted.",

frontend/src/pages/Community.vue

@@ -20,28 +20,38 @@
           />
         </b-tab>
         <b-tab no-body>
-          <contribution-list
-            @closeAllOpenCollapse="closeAllOpenCollapse"
-            :items="items"
-            @update-list-contributions="updateListContributions"
-            @update-contribution-form="updateContributionForm"
-            @delete-contribution="deleteContribution"
-            @update-state="updateState"
-            :contributionCount="contributionCount"
-            :showPagination="true"
-            :pageSize="pageSize"
-          />
+          <div v-if="items.length === 0">
+            {{ $t('contribution.noContributions.myContributions') }}
+          </div>
+          <div v-else>
+            <contribution-list
+              @closeAllOpenCollapse="closeAllOpenCollapse"
+              :items="items"
+              @update-list-contributions="updateListContributions"
+              @update-contribution-form="updateContributionForm"
+              @delete-contribution="deleteContribution"
+              @update-state="updateState"
+              :contributionCount="contributionCount"
+              :showPagination="true"
+              :pageSize="pageSize"
+            />
+          </div>
         </b-tab>
         <b-tab no-body>
-          <contribution-list
-            :items="itemsAll"
-            @update-list-contributions="updateListAllContributions"
-            @update-contribution-form="updateContributionForm"
-            :contributionCount="contributionCountAll"
-            :showPagination="true"
-            :pageSize="pageSizeAll"
-            :allContribution="true"
-          />
+          <div v-if="itemsAll.length === 0">
+            {{ $t('contribution.noContributions.allContributions') }}
+          </div>
+          <div v-else>
+            <contribution-list
+              :items="itemsAll"
+              @update-list-contributions="updateListAllContributions"
+              @update-contribution-form="updateContributionForm"
+              :contributionCount="contributionCountAll"
+              :showPagination="true"
+              :pageSize="pageSizeAll"
+              :allContribution="true"
+            />
+          </div>
         </b-tab>
       </b-tabs>
     </div>