EnCours

<template>
  <section class="inner encours-root">
    <div class="encours-content">
      <div class="dossiers-en-cours">
        <v-card>
          <v-card-title class="px-4">
            <v-radio-group row v-model="showFoldersFrom" hide-details class="mt-0 pt-0">
              <v-radio :color="x_colors.primaryDarkColor" label="Tous" :value="'all'"></v-radio>
              <v-radio :color="x_colors.primaryDarkColor" label="Me concernant" :value="'forMe'"></v-radio>
              <v-radio :color="x_colors.primaryDarkColor" label="Concernant" :value="'forUser'"></v-radio>
              <v-autocomplete
                :color="x_colors.primaryDarkColor"
                ref="autocompleteUsers"
                v-model="selectedUserKey"
                @click="showFoldersFrom = 'forUser'"
                :items="x_users"
                :single-line="true"
                :item-text="'fullName'"
                :item-value="'formattedName'"
                :clearable="true"
                :open-on-clear="true"
                :readonly="false"
              ></v-autocomplete>
            </v-radio-group>
            <v-spacer></v-spacer>
            <v-text-field
              v-model="searchDossiersEnCours"
              prepend-icon="search"
              label="Rechercher dans les dossiers en cours"
              single-line
              hide-details
              :color="x_colors.primaryDarkColor"
            ></v-text-field>
          </v-card-title>
        </v-card>
        <v-layout row>
          <v-flex xs3 mr-2>
            <v-card class="mt-4">
              <v-list two-line>
                <template v-for="(item, index) in x_dossiersATraiter">
                  <v-subheader v-if="item.header" :key="item.header">{{ item.header }}</v-subheader>

                  <v-divider v-if="index !== x_dossiersATraiter.length && index > 1" :key="index"></v-divider>

                  <v-list-tile v-if="item.id" :key="item.id">
                    <v-list-tile-content>
                      <v-list-tile-title
                        class="font-weight-bold"
                        v-html="item.id + ' ' + item.client"
                      ></v-list-tile-title>
                      <v-list-tile-sub-title v-html="item.comments"></v-list-tile-sub-title>
                    </v-list-tile-content>
                  </v-list-tile>
                </template>
              </v-list>
            </v-card>
          </v-flex>
          <v-flex xs9 ml-3>
            <v-card class="mt-4">
              <v-data-table
                :headers="x_tableHeaders"
                :items="x_tableData"
                color="dark"
                class="elevation-0 tlz-datatable"
              >
                <template v-slot:items="props">
                  <tr @dblclick="openModal(props.item.id)" class="cursor-pointer">
                    <td>{{ props.item.id }}</td>
                    <td>{{ props.item.client }}</td>
                    <td>{{ props.item.mission }}</td>
                    <td>{{ props.item.type }}</td>
                    <td>{{ props.item.demandeur }}</td>
                    <td>{{ props.item.validateur }}</td>
                    <td>{{ props.item.associe }}</td>
                    <!-- <td>
                      <div>
                        <span class="statut-text">{{
                          x_statutText(props.item.statut)
                        }}</span>
                        <v-progress-linear
                          class="statut-progress my-0"
                          :color="x_statutColor(props.item.statut)"
                          :value="x_statutValue(props.item.statut)"
                          height="15"
                        ></v-progress-linear>
                      </div>
                    </td>-->
                    <td class="text-xs-center">
                      <v-btn fab flat small class="tlz-btn" @click="openModal(props.item.id)">
                        <v-icon>remove_red_eye</v-icon>
                      </v-btn>
                    </td>
                  </tr>
                </template>
              </v-data-table>
            </v-card>
          </v-flex>
        </v-layout>
      </div>
    </div>
  </section>
</template>

<script>
import { mapGetters } from "vuex";

export default {
  // Component name
  name: "EnCours",

  // Middleware
  middleware: "",

  // Mount in view
  layout: "",

  // Dependencies
  components: {},

  // Stuff to do before component creation
  beforeCreate() {},

  // Stuff to do on component created
  created() {},

  // Async data
  asyncData(store) {},

  // Stuff to do on component mounted
  mounted() {},

  // Component properties
  props: {},

  // Page head tag
  head: () => ({}),

  // Reactive data
  data: () => ({
    selectedUserKey: ""
  }),

  // Conputed properties
  computed: {
    ...mapGetters({
      x_showFoldersFrom: "encours/showFoldersFrom",
      x_selectedUserKey: "encours/selectedUserKey",
      x_users: "app/users",
      x_user: "app/user",
      x_searchDossiersEnCours: "encours/searchDossiersEnCours",
      x_colors: "app/colors",
      x_tableHeaders: "encours/tableHeaders",
      x_tableData: "encours/tableData",
      x_dossiersATraiter: "encours/dossiersATraiter",
      x_modalData: "encours/modalData",
      x_statutText: "encours/statutText",
      x_statutColor: "encours/statutColor",
      x_statutValue: "encours/statutValue"
    }),

    showFoldersFrom: {
      get() {
        return this.x_showFoldersFrom;
      },
      set(value) {
        if (value === "forUser") {
          this.$refs.autocompleteUsers.$el
            .getElementsByTagName("input")[0]
            .click();
        }

        this.$store.commit("encours/UPDATE_SHOW_FOLDERS_FROM", {
          showFoldersFrom: value,
          selectedUserKey:
            value === "forMe" ? this.x_user.formattedName : this.selectedUserKey
        });
      }
    },

    searchDossiersEnCours: {
      get() {
        return this.x_searchDossiersEnCours;
      },
      set(value) {
        this.$store.commit("encours/UPDATE_SEARCH_DOSSIERS_EN_COURS", {
          data: value
        });
      }
    }
  },

  // Watch reactive data
  watch: {
    selectedUserKey(value) {
      this.showFoldersFrom = "forUser";
      this.$store.commit("encours/UPDATE_SHOW_FOLDERS_FROM", {
        showFoldersFrom: this.showFoldersFrom,
        selectedUserKey: value
      });
    }
  },

  // Component methods
  methods: {
    openModal(id) {
      this.$store.commit("app/OPEN_MODAL", { data: this.x_modalData(id) });
    }
  }
};
</script>

<style lang="css"></style>