CorpusParameters.vue 5.33 KB
Newer Older
1
2
3
4
5
6
<template>
    <v-card
      outlined
      class="my-5"
    >
      <v-card-title class="justify-center py-6">
Quentin David's avatar
Quentin David committed
7
        <h2 class="display-1">{{ $t('corpus-option-title') }}</h2>
8
9
      </v-card-title>

10
11
12
13
14
15
16
      <v-form 
        ref="form"
        class="px-12 pb-5"
        
        v-model="valid"
        @input="emitForm()"
      >
Quentin David's avatar
Quentin David committed
17
18
        <v-row>
          <v-col cols="6">
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
            <v-text-field
              class="pt-5"
              outlined

              required
              :rules="titleRules"

              label="Titre du corpus"
              v-model="formData.title"
            ></v-text-field>
            <v-textarea
              hide-details
              outlined
              height=7em
              auto-grow
              clearable

              label="Description du corpus"
              v-model="formData.description"
            ></v-textarea>
Quentin David's avatar
Quentin David committed
39
40
41
42
            <v-select
              class="my-5"
              outlined
              max-width=80%
43
44
45
46

              :items="languages"
              :label="$t('corpus-language')"
              v-model="formData.language"
Quentin David's avatar
Quentin David committed
47
48
            ></v-select>
          </v-col>
49
          <v-divider/>
Quentin David's avatar
Quentin David committed
50
51
          <v-col cols="6">
            <v-card outlined class="px-5 py-4 mb-5">
Quentin David's avatar
Quentin David committed
52
              <v-card-title class="subtitle-2">{{ $t('metadata-title') }}
Quentin David's avatar
Quentin David committed
53
54
55
56
              </v-card-title>
              <v-card-text>
                <v-text-field
                    class="mt-0"
57

Quentin David's avatar
Quentin David committed
58
                    :label="$t('metadata-author')"
59
                    v-model="formData.author"
Quentin David's avatar
Quentin David committed
60
                ></v-text-field>
61

Quentin David's avatar
Quentin David committed
62
63
                <v-text-field
                    class="pt-0 mt-0"
64

Quentin David's avatar
Quentin David committed
65
                    :label="$t('metadata-date')"
66
                    v-model="formData.date"
Quentin David's avatar
Quentin David committed
67
                ></v-text-field>
68

Quentin David's avatar
Quentin David committed
69
70
                <v-text-field
                    class="mt-0 pt-0"
71

Quentin David's avatar
Quentin David committed
72
                    :label="$t('metadata-corpus-type')"
73
                    v-model="formData.type"
Quentin David's avatar
Quentin David committed
74
                ></v-text-field>
75

Quentin David's avatar
Quentin David committed
76
                <v-row
77
                  v-for="metadata in formData.additionalMetadata"
Quentin David's avatar
Quentin David committed
78
79
80
81
82
                  :key="metadata.id"
                >
                  <v-col>
                    <v-text-field 
                      class="mt-0 pt-0"
Quentin David's avatar
Quentin David committed
83
                      :label="$t('metadata-additional-name')"
Quentin David's avatar
Quentin David committed
84
85
86
87
88
89
                      v-model="metadata.name"
                    ></v-text-field>
                  </v-col>
                  <v-col>
                    <v-text-field 
                      class="mt-0 pt-0"
Quentin David's avatar
Quentin David committed
90
                      :label="$t('metadata-additional-value')"
Quentin David's avatar
Quentin David committed
91
92
93
94
95
96
97
98
99
100
101
102
103
                      v-model="metadata.value"
                    ></v-text-field>
                  </v-col>
                  <v-col cols="1">
                    <v-btn icon @click="delete_metadata(metadata.id)">
                      <v-icon>fa-times</v-icon>
                    </v-btn>
                  </v-col>
                </v-row>
              </v-card-text>

              <v-card-actions>
                <v-btn elevation="6" @click="add_metadata()">
Quentin David's avatar
Quentin David committed
104
                  <v-icon>mdi-plus</v-icon> {{ $t('metadata-additional-button-label')}}
Quentin David's avatar
Quentin David committed
105
106
107
108
109
                </v-btn>
              </v-card-actions>
            </v-card>
          </v-col>
        </v-row>
110
      </v-form>
111
112
113
114
    </v-card>
</template>
<script>

115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
export default {
  data: () => ({
    valid: true,
    languages: ['Français','Anglais','Mandarin','Roumain', 'Nahuatl', 'Multilingue'],
    additional_metadata_id: 0,
    titleRules: [
      v => !!v || 'Title is required'
    ],
    // Correspond to metadata in Corpus Model
    formData: {
      title: '',
      description: '',
      language: null,
      author: '',
      date: '',
      type: '',
      additionalMetadata: []
    }
  }),
  methods:
  {
    add_metadata() {
      this.additional_metadata_id += 1;
      this.formData.additionalMetadata.push({id: this.additional_metadata_id, name:"", value: ""})
    },
    delete_metadata(metadata_id) {
      var index = null;
      for (var i=0; i<this.formData.additionalMetadata.length; i++) {
        if (this.formData.additionalMetadata[i].id == metadata_id) {
          index = i;
        }
      }
      if (index !== null) {
        this.formData.additionalMetadata.splice(index, 1);
      }
    },
    validate() {
      this.$refs.form.validate();
    },
    // Send the form to the parent for each change
    // Also send if the form is valid or not.
    emitForm() {
      if (this.$refs.form) {
        const valid = this.$refs.form.validate()
        this.$emit('corpus-parameters-update', { isValid: valid, data: this.formData });
      }
161
    }
162
163
  },
}
Quentin David's avatar
Quentin David committed
164
165
166
167
168
169
</script>
<i18n>
{
  "fr":{
    "corpus-option-title":"Paramètres du corpus",
    "corpus-language":"Langue du corpus",
170
    "metadata-title":"Métadonnées",
Quentin David's avatar
Quentin David committed
171
172
173
174
175
176
177
178
179
180
    "metadata-author":"Auteur",
    "metadata-date":"Date",
    "metadata-corpus-type":"Type",
    "metadata-additional-name":"Nom de la métadonnée",
    "metadata-additional-value":"Valeur de la métadonnée",
    "metadata-additional-button-label":"Ajouter une métadonnée"
  },
  "en":{
    "corpus-option-title":"Parameters of the corpus",
    "corpus-language":"Corpus language",
181
    "metadata-title":"Metadata",
Quentin David's avatar
Quentin David committed
182
183
184
185
186
187
188
189
190
    "metadata-author":"Author",
    "metadata-date":"Date",
    "metadata-corpus-type":"Type",
    "metadata-additional-name":"Name of the metadata",
    "metadata-additional-value":"Value of the metadata",
    "metadata-additional-button-label":"Add a metadata"
  }
}
</i18n>