Fix production dates

src/components/pages/OpenProductions.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="open-productions page">
-    <div class="social-contributions flexcolumn" v-if="isContributions">
+    <div class="social-contributions" v-if="isContributions">
       <h1 class="subtitle has-text-centered">
         {{ $t('intro.title') }}
       </h1>
@@ -60,36 +60,34 @@
       class="flexrow open-productions-header"
       v-if="!isOpenProductionsLoading && openProductions.length > 0"
     >
-      <img class="flexrow-item" src="../../assets/kitsu.png" width="23" />
-      <h1 class="title flexrow-item">
+      <img class="logo" src="../../assets/kitsu.png" width="23" />
+      <h1 class="title filler">
         {{ $t('productions.home.title') }}
       </h1>
-      <div class="filler"></div>
-      <a
-        id="create-production-button"
-        class="button flexrow-item"
+      <button
+        class="button"
         @click="newProductionPage"
         v-if="isCurrentUserAdmin"
       >
         {{ $t('productions.home.create_new') }}
-      </a>
+      </button>
     </div>
     <div
       class="open-productions-box"
       v-if="!isOpenProductionsLoading && openProductions.length > 0"
     >
       <div class="flexrow search-area" v-if="openProductions.length > 6">
         <search-field
-          ref="search-field"
-          class="search-field"
+          class="search-field ml1"
           @change="onSearchChange"
+          v-focus
         />
       </div>
 
       <div
         :class="{
           'open-productions-list': true,
-          'is-grid': openProductions && openProductions.length > 4
+          'is-grid': openProductions?.length > 4
         }"
       >
         <div
@@ -148,13 +146,6 @@
         </p>
       </div>
     </div>
-    <edit-production-modal
-      :active="modals.isNewDisplayed"
-      :is-loading="loading.edit"
-      :is-error="errors.edit"
-      @confirm="confirmEditProduction"
-      @cancel="hideNewModal"
-    />
   </div>
 </template>
 
@@ -166,15 +157,13 @@ import { buildNameIndex } from '@/lib/indexing'
 import colors from '@/lib/colors'
 import preferences from '@/lib/preferences'
 
-import EditProductionModal from '@/components/modals/EditProductionModal.vue'
 import SearchField from '@/components/widgets/SearchField.vue'
 import Spinner from '@/components/widgets/Spinner.vue'
 
 export default {
   name: 'open-productions',
 
   components: {
-    EditProductionModal,
     SearchField,
     Spinner,
     XIcon
@@ -184,21 +173,11 @@ export default {
     return {
       isContributions: true,
       filteredProductions: [],
-      search: '',
-      errors: {
-        edit: false
-      },
-      loading: {
-        edit: false
-      },
-      modals: {
-        isNewDisplayed: false
-      }
+      search: ''
     }
   },
 
   mounted() {
-    this.$refs['search-field']?.focus()
     this.filteredProductions = this.openProductions
     this.productionIndex = buildNameIndex(this.openProductions)
     this.isContributions =
@@ -222,7 +201,7 @@ export default {
     ...mapActions(['newProduction']),
 
     generateAvatar(production) {
-      const firstLetter = production.name.length > 0 ? production.name[0] : 'P'
+      const firstLetter = production.name?.[0] || 'P'
       return firstLetter.toUpperCase()
     },
 
@@ -285,31 +264,12 @@ export default {
       return `/api/pictures/thumbnails/projects/${production.id}.png`
     },
 
-    confirmEditProduction(form) {
-      this.errors.edit = false
-      this.loading.edit = true
-      this.newProduction(form)
-        .then(() => {
-          this.modals.isNewDisplayed = false
-          this.loading.edit = false
-        })
-        .catch(err => {
-          console.error(err)
-          this.loading.edit = false
-          this.errors.edit = true
-        })
-    },
-
     newProductionPage() {
       this.$router.push({
         name: 'new-production'
       })
     },
 
-    hideNewModal() {
-      this.modals.isNewDisplayed = false
-    },
-
     onSearchChange(search) {
       if (search === '') {
         this.filteredProductions = this.openProductions
@@ -324,8 +284,6 @@ export default {
     }
   },
 
-  watch: {},
-
   metaInfo() {
     return {
       title: `${this.$t('productions.home.title')} - Kitsu`
@@ -475,14 +433,15 @@ a.secondary:hover {
 }
 
 .open-productions-header {
+  gap: 0 1em;
   margin-top: 4em;
   margin-bottom: 1em;
   max-width: 800px;
   margin-left: auto;
   margin-right: auto;
 
-  img {
-    margin-left: 3px;
+  .logo {
+    margin: 0 3px;
   }
 }
 
@@ -583,10 +542,11 @@ a.secondary:hover {
   }
 
   .open-productions-box {
-    padding: 0;
+    padding: 1em 0;
   }
 
-  .flexrow {
+  .open-productions-header,
+  .social-contributions .flexrow {
     flex-direction: column;
   }
 }

src/components/pages/ProductionSchedule.vue

@@ -10,7 +10,9 @@
             wrapper-class="datepicker"
             input-class="date-input input short"
             :language="locale"
-            :disabled-dates="{ days: [6, 0] }"
+            :disabled-dates="{
+              from: selectedEndDate
+            }"
             :monday-first="true"
             format="yyyy-MM-dd"
             v-model="selectedStartDate"
@@ -24,7 +26,9 @@
             wrapper-class="datepicker"
             input-class="date-input input short"
             :language="locale"
-            :disabled-dates="{ days: [6, 0] }"
+            :disabled-dates="{
+              to: selectedStartDate
+            }"
             :monday-first="true"
             format="yyyy-MM-dd"
             v-model="selectedEndDate"

src/components/pages/production/NewProduction.vue

@@ -127,7 +127,6 @@
                 :placeholder="startDatePlaceholder"
                 :language="locale"
                 :disabled-dates="{
-                  days: [6, 0],
                   from: productionToCreate.settings.dateEnd
                 }"
                 :monday-first="true"
@@ -140,7 +139,6 @@
                 input-class="is-small date-input input"
                 :language="locale"
                 :disabled-dates="{
-                  days: [6, 0],
                   to: productionToCreate.settings.dateStart
                 }"
                 :placeholder="endDatePlaceholder"

src/components/pages/production/ProductionParameters.vue

@@ -20,6 +20,9 @@
             <date-field
               ref="startDateField"
               class="mb0"
+              :disabled-dates="{
+                from: form.end_date
+              }"
               :label="$t('productions.fields.start_date')"
               :short-date="true"
               v-model="form.start_date"
@@ -29,6 +32,9 @@
             <date-field
               ref="endDateField"
               class="mb0"
+              :disabled-dates="{
+                to: form.start_date
+              }"
               :label="$t('productions.fields.end_date')"
               :short-date="true"
               v-model="form.end_date"

src/main.js

@@ -32,24 +32,13 @@ Vue.use(VueAnimXYZ)
 // Make the current route part of the main state.
 sync(store, router)
 
-// Global custom directive to enable automatic focus on field after page
-// loading.
+// Global custom directive to enable automatic focus on field after page loading.
 Vue.directive('focus', {
   inserted(el, binding) {
     el.focus(binding.value)
   }
 })
 
-// Allow access to i18n object from vue instance.
-Vue.prototype.$locale = {
-  change(locale) {
-    i18n.locale = locale
-  },
-  current() {
-    return i18n.locale
-  }
-}
-
 // Start application.
 new Vue({
   el: '#app',