WIP: filtry dziennika

src/components/JournalView/JournalOptions.vue

@@ -39,6 +39,12 @@
           </action-button>
         </div>
       </div>
+
+      <div class="options_filters">
+        <span class="journal-filter active" tabindex="0">AKTYWNY</span>
+        <span class="journal-filter abandoned" tabindex="0">PORZUCONY</span>
+        <span class="journal-filter fulfilled" tabindex="0">WYPEŁNIONY</span>
+      </div>
     </div>
   </div>
 </template>
@@ -109,6 +115,7 @@ export default defineComponent({
 .options {
   &_wrapper {
     display: flex;
+    flex-direction: column;
   }
 
   &_content {
@@ -124,6 +131,30 @@ export default defineComponent({
       padding: 0.25em 0.25em 0 0;
     }
   }
+
+  &_filters {
+    margin: 0.5em 0 0 0;
+
+    .journal-filter {
+      background-color: #333;
+      padding: 0.25em 0.3em;
+      margin: 0 0.25em 0 0;
+
+      cursor: pointer;
+
+      &.abandoned {
+        color: salmon;
+      }
+
+      &.fulfilled {
+        color: lightgreen;
+      }
+
+      &.active {
+        color: lightblue;
+      }
+    }
+  }
 }
 
 .search {
@@ -162,6 +193,7 @@ export default defineComponent({
   .options {
     &_wrapper {
       justify-content: center;
+      align-items: center;
     }
 
     &_content {

src/views/JournalView.vue

@@ -57,11 +57,12 @@
                         </b>
                         <i v-else>{{ $t('history.timetable-abandoned') }} </i>
 
-
                         <s v-if="item.endDate != item.scheduledEndDate && item.terminated" class="text--grayed">
                           {{ localeTime(item.fulfilled ? item.endDate : item.scheduledEndDate, $i18n.locale) }}
                         </s>
-                        <span>{{ localeTime(item.fulfilled ? item.scheduledEndDate : item.endDate, $i18n.locale) }} </span>
+                        <span
+                          >{{ localeTime(item.fulfilled ? item.scheduledEndDate : item.endDate, $i18n.locale) }}
+                        </span>
                       </div>
                     </span>
 
@@ -267,9 +268,7 @@ export default defineComponent({
   },
 
   mounted() {
-    setTimeout(() => {
+    this.fetchHistoryData();
-      this.fetchHistoryData();
-    }, 250);
   },
 
   methods: {
@@ -291,6 +290,9 @@ export default defineComponent({
       this.fetchHistoryData({
         searchedDriver: this.searchedDriver,
         searchedTrain: this.searchedTrain,
+        fulfilled: true,
+        abandoned: true,
+        terminated: true
       });
     },
 
@@ -302,6 +304,9 @@ export default defineComponent({
       props: {
         searchedDriver?: string;
         searchedTrain?: string;
+        fulfilled?: boolean;
+        terminated?: boolean;
+        abandoned?: boolean;
       } = {}
     ) {
       this.historyDataStatus.status = DataStatus.Loading;
@@ -318,7 +323,8 @@ export default defineComponent({
       else queries.push('sortBy=timetableId');
 
       queries.push('countLimit=15');
-      // queries.push('fulfilled=0', 'terminated=1');
+
+      // queries.push(`fulfilled=${Number(props.fulfilled) || 1}`, `terminated=${Number(props.terminated) || 1}`, `abandoned=${Number(props.abandoned) || 1}`, `active=1`);
 
       try {
         const responseData: APIResponse | null = await (await axios.get(`${API_URL}?${queries.join('&')}`)).data;
@@ -394,7 +400,7 @@ export default defineComponent({
         color: #adadad;
 
         &.confirmed {
-          color: rgb(163, 235, 163);
+          color: #a3eba3;
         }
       }
     }