"have.length",
1
); // name, description, status
- cy.get("#agreement_status").select(agreement.status);
+ cy.get("#agreement_status .vs__search").type(agreement.status + '{enter}',{force:true});
cy.contains("Add new period").click();
cy.get("#agreements_add").contains("Submit").click();
"have.value",
agreements[0].description
);
- cy.get("#agreement_status").should("have.value", agreement.status);
+ cy.get("#agreement_status .vs__selected").contains("Active");
cy.get("#agreement_is_perpetual_no").should("be.checked");
cy.get("#started_on_0").invoke("val").should("eq", dates["today_us"]);
cy.get("#ended_on_0").invoke("val").should("eq", dates["tomorrow_us"]);
cy.get("#license_name").type(license.name);
cy.get("#license_description").type(license.description);
cy.get("#licenses_add").contains("Submit").click();
- cy.get("#license_type").select(license.type);
- cy.get("#license_status").select(license.status);
+ cy.get("#license_type .vs__search").type(license.type + '{enter}',{force:true});
+ cy.get("#license_status .vs__search").type(license.status + '{enter}',{force:true});
cy.get("#started_on").click();
cy.get(".flatpickr-calendar")
"have.value",
license.description
);
- cy.get("#license_type").should("have.value", license.type);
- cy.get("#license_status").should("have.value", license.status);
+ cy.get("#license_type .vs__selected").contains("Local");
+ cy.get("#license_status .vs__selected").contains("Active");
cy.get("#started_on").invoke("val").should("eq", dates["today_us"]);
cy.get("#ended_on").invoke("val").should("eq", dates["tomorrow_us"]);
1
);
cy.get("#package_name").type(erm_package.name);
- cy.get("#package_type").select(erm_package.package_type);
- cy.get("#package_content_type").select(erm_package.content_type);
+ cy.get("#package_type .vs__search").type(erm_package.package_type + '{enter}',{force:true});
+ cy.get("#package_content_type .vs__search").type(erm_package.content_type + '{enter}',{force:true});
// Submit the form, get 500
cy.intercept("POST", "/api/v1/erm/eholdings/local/packages", {
// Form has been correctly filled in
cy.get("#package_name").should("have.value", erm_package.name);
- cy.get("#package_type").should("have.value", erm_package.package_type);
- cy.get("#package_content_type").should("have.value", erm_package.content_type);
+ cy.get("#package_type .vs__selected").contains("Complete");
+ cy.get("#package_content_type .vs__selected").contains("Print");
// Submit the form, get 500
cy.intercept("PUT", "/api/v1/erm/eholdings/local/packages/*", {
<label :for="`license_id_${counter}`"
>{{ $t("License") }}:</label
>
- <select
+ <v-select
:id="`license_id_${counter}`"
v-model="agreement_license.license_id"
- required
+ label="name"
+ :reduce="(l) => l.license_id"
+ :options="licenses"
>
- <option value=""></option>
- <option
- v-for="license in licenses"
- :key="license.license_id"
- :value="license.license_id"
- :selected="
- license.license_id ==
- agreement_license.license_id
- ? true
- : false
- "
- >
- {{ license.name }}
- </option>
- </select>
+ <template #search="{ attributes, events }">
+ <input
+ :required="!agreement_license.license_id"
+ class="vs__search"
+ v-bind="attributes"
+ v-on="events"
+ />
+ </template>
+ </v-select>
<span class="required">{{ $t("Required") }}</span>
</li>
<li>
<label :for="`license_status_${counter}`"
>{{ $t("Status") }}:</label
>
- <select v-model="agreement_license.status" required>
- <option value=""></option>
- <option
- v-for="r in av_agreement_license_statuses"
- :key="r.authorised_values"
- :value="r.authorised_value"
- :selected="
- r.authorised_value == agreement_license.status
- ? true
- : false
- "
- >
- {{ r.lib }}
- </option>
- </select>
+ <v-select
+ :id="`license_status_${counter}`"
+ v-model="agreement_license.status"
+ label="lib"
+ :reduce="(av) => av.authorised_value"
+ :options="av_agreement_license_statuses"
+ >
+ <template #search="{ attributes, events }">
+ <input
+ :required="!agreement_license.status"
+ class="vs__search"
+ v-bind="attributes"
+ v-on="events"
+ />
+ </template>
+ </v-select>
<span class="required">{{ $t("Required") }}</span>
</li>
<li>
<label :for="`license_location_${counter}`"
>{{ $t("Physical location") }}:
</label>
- <select v-model="agreement_license.physical_location">
- <option value=""></option>
- <option
- v-for="r in av_agreement_license_location"
- :key="r.authorised_values"
- :value="r.authorised_value"
- :selected="
- r.authorised_value ==
- agreement_license.physical_location
- ? true
- : false
- "
- >
- {{ r.lib }}
- </option>
- </select>
+ <v-select
+ :id="`license_location_${counter}`"
+ v-model="agreement_license.physical_location"
+ label="lib"
+ :reduce="(av) => av.authorised_value"
+ :options="av_agreement_license_location"
+ />
</li>
<li>
<label :for="`license_notes_${counter}`"
<label :for="`related_agreement_id_${counter}`"
>{{ $t("Related agreement") }}:
</label>
- <select
- v-model="relationship.related_agreement_id"
+ <v-select
:id="`related_agreement_id_${counter}`"
+ v-model="relationship.related_agreement_id"
+ label="name"
+ :reduce="(a) => a.agreement_id"
+ :options="agreements"
>
- <option value=""></option>
- <option
- v-for="agreement in agreements"
- :key="agreement.agreement_id"
- :value="agreement.agreement_id"
- :selected="
- agreement.agreement_id ==
- relationship.related_agreement_id
- ? true
- : false
- "
- >
- {{ agreement.name }}
- </option>
- </select>
+ <template #search="{ attributes, events }">
+ <input
+ :required="!relationship.related_agreement_id"
+ class="vs__search"
+ v-bind="attributes"
+ v-on="events"
+ />
+ </template>
+ </v-select>
+ <span class="required">{{ $t("Required") }}</span>
</li>
<li>
<label :for="`related_agreement_relationship_${counter}`"
>{{ $t("Relationship") }}:
</label>
- <select
- v-model="relationship.relationship"
+ <v-select
:id="`related_agreement_relationship_${counter}`"
- required
+ v-model="relationship.relationship"
+ label="lib"
+ :reduce="(av) => av.authorised_value"
+ :options="av_agreement_relationships"
>
- <option value=""></option>
- <option
- v-for="r in av_agreement_relationships"
- :key="r.authorised_values"
- :value="r.authorised_value"
- :selected="
- r.authorised_value == relationship.relationship
- ? true
- : false
- "
- >
- {{ r.lib }}
- </option>
- </select>
+ <template #search="{ attributes, events }">
+ <input
+ :required="!relationship.relationship"
+ class="vs__search"
+ v-bind="attributes"
+ v-on="events"
+ />
+ </template>
+ </v-select>
<span class="required">{{ $t("Required") }}</span>
</li>
<li>
<label :for="`user_role_${counter}`"
>{{ $t("Role") }}:</label
>
- <select v-model="user_role.role" required>
- <option value=""></option>
- <option
- v-for="r in av_agreement_user_roles"
- :key="r.authorised_values"
- :value="r.authorised_value"
- :selected="
- r.authorised_value == user_role.role
- ? true
- : false
- "
- >
- {{ r.lib }}
- </option>
- </select>
+ <v-select
+ :id="`user_role_${counter}`"
+ v-model="user_role.role"
+ label="lib"
+ :reduce="(av) => av.authorised_value"
+ :options="av_agreement_user_roles"
+ >
+ <template #search="{ attributes, events }">
+ <input
+ :required="!user_role.role"
+ class="vs__search"
+ v-bind="attributes"
+ v-on="events"
+ />
+ </template>
+ </v-select>
<span class="required">{{ $t("Required") }}</span>
</li>
</ol>
<label for="agreement_vendor_id"
>{{ $t("Vendor") }}:</label
>
- <select
+ <v-select
id="agreement_vendor_id"
v-model="agreement.vendor_id"
- >
- <option value=""></option>
- <option
- v-for="vendor in vendors"
- :key="vendor.vendor_id"
- :value="vendor.id"
- :selected="
- vendor.id == agreement.vendor_id
- ? true
- : false
- "
- >
- {{ vendor.name }}
- </option>
- </select>
+ label="name"
+ :reduce="(vendor) => vendor.id"
+ :options="vendors"
+ />
</li>
<li>
<label for="agreement_description"
<label for="agreement_status"
>{{ $t("Status") }}:</label
>
- <select
+ <v-select
id="agreement_status"
v-model="agreement.status"
- @change="onStatusChange($event)"
- required
+ label="lib"
+ :reduce="(av) => av.authorised_value"
+ :options="av_agreement_statuses"
+ @option:selected="onStatusChanged"
+ :required="!agreement.status"
>
- <option value=""></option>
- <option
- v-for="status in av_agreement_statuses"
- :key="status.authorised_values"
- :value="status.authorised_value"
- :selected="
- status.authorised_value ==
- agreement.status
- ? true
- : false
- "
- >
- {{ status.lib }}
- </option>
- </select>
+ <template #search="{ attributes, events }">
+ <input
+ :required="!agreement.status"
+ class="vs__search"
+ v-bind="attributes"
+ v-on="events"
+ />
+ </template>
+ </v-select>
<span class="required">{{ $t("Required") }}</span>
</li>
<li>
<label for="agreement_closure_reason"
>{{ $t("Closure reason") }}:</label
>
- <select
+ <v-select
id="agreement_closure_reason"
v-model="agreement.closure_reason"
+ label="lib"
+ :reduce="(av) => av.authorised_value"
+ :options="av_agreement_closure_reasons"
:disabled="
agreement.status == 'closed' ? false : true
"
- >
- <option value=""></option>
- <option
- v-for="r in av_agreement_closure_reasons"
- :key="r.authorised_values"
- :value="r.authorised_value"
- :selected="
- r.authorised_value ==
- agreement.closure_reason
- ? true
- : false
- "
- >
- {{ r.lib }}
- </option>
- </select>
+ />
</li>
<li>
<label for="agreement_is_perpetual" class="radio"
<label for="agreement_renewal_priority"
>{{ $t("Renewal priority") }}:</label
>
- <select v-model="agreement.renewal_priority">
- <option value=""></option>
- <option
- v-for="p in av_agreement_renewal_priorities"
- :key="p.authorised_values"
- :value="p.authorised_value"
- :selected="
- p.authorised_value ==
- agreement.renewal_priority
- ? true
- : false
- "
- >
- {{ p.lib }}
- </option>
- </select>
+ <v-select
+ id="agreement_renewal_priority"
+ v-model="agreement.renewal_priority"
+ label="lib"
+ :reduce="(av) => av.authorised_value"
+ :options="av_agreement_renewal_priorities"
+ />
</li>
<li>
<label for="agreement_license_info"
}
)
},
- onStatusChange(event) {
- if (event.target.value != 'closed') {
+ onStatusChanged(e) {
+ if (e.authorised_value != 'closed') {
this.agreement.closure_reason = ''
}
}
</legend>
<ol>
<li>
- <label :for="`agreement_id_${counter}`"
+ <label :for="`agreement_id_${counter}`" class="required"
>{{ $t("Agreement") }}:
</label>
- <select
- v-model="package_agreement.agreement_id"
+ <v-select
:id="`agreement_id_${counter}`"
- required
+ v-model="package_agreement.agreement_id"
+ label="name"
+ :reduce="(a) => a.agreement_id"
+ :options="agreements"
>
- <option value=""></option>
- <option
- v-for="agreement in agreements"
- :key="agreement.agreement_id"
- :value="agreement.agreement_id"
- :selected="
- agreement.agreement_id ==
- package_agreement.agreement_id
- ? true
- : false
- "
- >
- {{ agreement.name }}
- </option>
- </select>
+ <template #search="{ attributes, events }">
+ <input
+ :required="!package_agreement.agreement_id"
+ class="vs__search"
+ v-bind="attributes"
+ v-on="events"
+ />
+ </template>
+ </v-select>
<span class="required">{{ $t("Required") }}</span>
</li>
</ol>
<label for="package_vendor_id"
>{{ $t("Vendor") }}:</label
>
- <select
+ <v-select
id="package_vendor_id"
v-model="erm_package.vendor_id"
- >
- <option value=""></option>
- <option
- v-for="vendor in vendors"
- :key="vendor.vendor_id"
- :value="vendor.id"
- :selected="
- vendor.id == erm_package.vendor_id
- ? true
- : false
- "
- >
- {{ vendor.name }}
- </option>
- </select>
+ label="name"
+ :reduce="(vendor) => vendor.id"
+ :options="vendors"
+ />
</li>
<li>
<label for="package_type">{{ $t("Type") }}:</label>
- <select
+ <v-select
id="package_type"
v-model="erm_package.package_type"
- >
- <option value=""></option>
- <option
- v-for="type in av_package_types"
- :key="type.authorised_values"
- :value="type.authorised_value"
- :selected="
- type.authorised_value ==
- erm_package.package_type
- ? true
- : false
- "
- >
- {{ type.lib }}
- </option>
- </select>
+ label="lib"
+ :reduce="(av) => av.authorised_value"
+ :options="av_package_types"
+ />
</li>
<li>
<label for="package_content_type">{{
$t("Content type: ")
}}</label>
- <select
+ <v-select
id="package_content_type"
v-model="erm_package.content_type"
- >
- <option value=""></option>
- <option
- v-for="type in av_package_content_types"
- :key="type.authorised_values"
- :value="type.authorised_value"
- :selected="
- type.authorised_value ==
- erm_package.content_type
- ? true
- : false
- "
- >
- {{ type.lib }}
- </option>
- </select>
+ label="lib"
+ :reduce="(av) => av.authorised_value"
+ :options="av_package_content_types"
+ />
</li>
<EHoldingsPackageAgreements
<label for="title_publication_type"
>{{ $t("Publication type") }}:</label
>
- <select
+ <v-select
id="title_publication_type"
v-model="title.publication_type"
- >
- <option value=""></option>
- <option
- v-for="type in av_title_publication_types"
- :key="type.authorised_values"
- :value="type.authorised_value"
- :selected="
- type.authorised_value ==
- title.publication_type
- ? true
- : false
- "
- >
- {{ type.lib }}
- </option>
- </select>
+ label="lib"
+ :reduce="(av) => av.authorised_value"
+ :options="av_title_publication_types"
+ />
</li>
<li>
</legend>
<ol>
<li>
- <label :for="`resource_id_${counter}`" class="required"
+ <label
+ :for="`resource_package_id_${counter}`"
+ class="required"
>{{ $t("Package") }}:
</label>
- <select
+ <!-- Parse to integer, resource.package_id is an integer, but GET /packages return package_id as string -->
+ <v-select
+ :id="`resource_package_id_${counter}`"
v-model="resource.package_id"
- :id="`resource_id_${counter}`"
- required
+ label="name"
+ :reduce="(p) => parseInt(p.package_id)"
+ :options="packages"
>
- <option value=""></option>
- <option
- v-for="p in packages"
- :key="p.package_id"
- :value="p.package_id"
- :selected="
- p.package_id == resource.package_id
- ? true
- : false
- "
- >
- {{ p.name }}
- </option>
- </select>
+ <template #search="{ attributes, events }">
+ <input
+ :required="!resource.package_id"
+ class="vs__search"
+ v-bind="attributes"
+ v-on="events"
+ />
+ </template>
+ </v-select>
<span class="required">{{ $t("Required") }}</span>
</li>
<li>
- <label for="title_vendor_id">{{ $t("Vendor") }}:</label>
- <select id="title_vendor_id" v-model="resource.vendor_id">
- <option value=""></option>
- <option
- v-for="vendor in vendors"
- :key="vendor.vendor_id"
- :value="vendor.id"
- :selected="
- vendor.id == resource.vendor_id ? true : false
- "
- >
- {{ vendor.name }}
- </option>
- </select>
+ <label :for="`resource_vendor_id_${counter}`"
+ >{{ $t("Vendor") }}:</label
+ >
+ <v-select
+ :id="`resource_vendor_id_${counter}`"
+ v-model="resource.vendor_id"
+ label="name"
+ :reduce="(vendor) => vendor.id"
+ :options="vendors"
+ />
</li>
<li>
};
</script>
-<style scoped>
+<style src="vue-select/dist/vue-select.css"></style>
+<style>
a.router-link-active {
font-weight: 700;
}
-</style>
+
+form .v-select {
+ display: inline-block;
+ background-color: white;
+ width: 30%;
+}
+
+.v-select, input:not([type=submit]):not([type=search]):not([type=button]), textarea {
+ border-color: rgba(60,60,60,0.26);
+ border-width: 1px;
+ border-radius: 4px;
+ min-width: 30%;
+}
+</style>
\ No newline at end of file
<label for="license_vendor_id"
>{{ $t("Vendor") }}:</label
>
- <select
+ <v-select
id="license_vendor_id"
v-model="license.vendor_id"
- >
- <option value=""></option>
- <option
- v-for="vendor in vendors"
- :key="vendor.vendor_id"
- :value="vendor.id"
- :selected="
- vendor.id == license.vendor_id
- ? true
- : false
- "
- >
- {{ vendor.name }}
- </option>
- </select>
+ label="name"
+ :reduce="(vendor) => vendor.id"
+ :options="vendors"
+ />
</li>
-
<li>
<label for="license_description"
>{{ $t("Description") }}:
</li>
<li>
<label for="license_type">{{ $t("Type") }}:</label>
- <select
+ <v-select
id="license_type"
v-model="license.type"
- required
+ label="lib"
+ :reduce="(av) => av.authorised_value"
+ :options="av_license_types"
>
- <option value=""></option>
- <option
- v-for="type in av_license_types"
- :key="type.authorised_values"
- :value="type.authorised_value"
- :selected="
- type.authorised_value == license.type
- ? true
- : false
- "
- >
- {{ type.lib }}
- </option>
- </select>
+ <template #search="{ attributes, events }">
+ <input
+ :required="!license.type"
+ class="vs__search"
+ v-bind="attributes"
+ v-on="events"
+ />
+ </template>
+ </v-select>
<span class="required">{{ $t("Required") }}</span>
</li>
<li>
<label for="license_status"
>{{ $t("Status") }}:</label
>
- <select
+ <v-select
id="license_status"
v-model="license.status"
- required
+ :reduce="(av) => av.authorised_value"
+ :options="av_license_statuses"
+ label="lib"
>
- <option value=""></option>
- <option
- v-for="status in av_license_statuses"
- :key="status.authorised_values"
- :value="status.authorised_value"
- :selected="
- status.authorised_value ==
- license.status
- ? true
- : false
- "
- >
- {{ status.lib }}
- </option>
- </select>
+ <template #search="{ attributes, events }">
+ <input
+ :required="!license.status"
+ class="vs__search"
+ v-bind="attributes"
+ v-on="events"
+ />
+ </template>
+ </v-select>
<span class="required">{{ $t("Required") }}</span>
</li>
<li>
import { library } from "@fortawesome/fontawesome-svg-core";
import { faPlus, faPencil, faTrash } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import vSelect from "vue-select";
library.add(faPlus, faPencil, faTrash);
.use(createPinia())
.use(router)
.use(i18n)
- .component("font-awesome-icon", FontAwesomeIcon);
+ .component("font-awesome-icon", FontAwesomeIcon)
+ .component("v-select", vSelect);
app.config.unwrapInjectedRef = true;
app.mount("#erm");
const mainStore = useMainStore();
"vue": "^3.2.31",
"vue-flatpickr-component": "^9",
"vue-i18n": "^9.1.10",
- "vue-router": "^4.0.14"
+ "vue-router": "^4.0.14",
+ "vue-select": "^4.0.0-beta.5"
},
"scripts": {
"build": "node_modules/.bin/gulp build",
projects / srvgit / commitdiff