Skip to content

Commit db6ba06

Browse files
miledivovicmiledivovic
authored
Merge pull request #1383 from cassproject/version-identifier
Version identifier
2 parents 12c7941 + a36e647 commit db6ba06

File tree

5 files changed

+329
-9
lines changed

5 files changed

+329
-9
lines changed

‎src/lode/components/AddProperty.vue‎

Lines changed: 196 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -73,7 +73,7 @@
7373
</p>
7474
<!-- text property input -->
7575
<div
76-
v-if="selectedPropertyToAddIsTextValue || addRelationBy === 'url'"
76+
v-if="(selectedPropertyToAddIsTextValue || addRelationBy === 'url') && !selectedPropertyToAddIsVersionIdentifier"
7777
class="add-property-field">
7878
<!-- if it is a text input type, show the following -->
7979
<div class="add-property__input-type">
@@ -117,6 +117,113 @@
117117
</div>
118118
</div>
119119
</div>
120+
121+
<!-- Version Identifier input - special handling for complex object -->
122+
<div
123+
v-else-if="selectedPropertyToAddIsVersionIdentifier"
124+
class="add-property-field">
125+
<div class="add-property__input-type">
126+
<div class="add-property__select-type">
127+
<div class="field is-expanded">
128+
<h3 class="subtitle is-6">
129+
{{ editingVersionIdentifierIndex >= 0 ? 'Edit Version Identifier' : 'Enter Version Identifier Information' }}
130+
</h3>
131+
132+
<!-- Display existing version identifiers -->
133+
<div v-if="versionIdentifiers.length > 0"
134+
class="field">
135+
<label class="label">Current Version Identifiers</label>
136+
<div class="box"
137+
v-for="(identifier, index) in versionIdentifiers"
138+
:key="index"
139+
:class="{ 'has-background-info-light': editingVersionIdentifierIndex === index }">
140+
<div class="columns is-vcentered">
141+
<div class="column">
142+
<p><strong>Value:</strong> {{ identifier.identifierValue }}</p>
143+
<p><strong>Name:</strong> {{ identifier.identifierName['@value'] }}</p>
144+
<p><strong>Type:</strong> {{ identifier.identifierType }}</p>
145+
</div>
146+
<div class="column is-narrow">
147+
<div class="buttons">
148+
<button
149+
class="button is-small is-info"
150+
@click="editVersionIdentifier(index)"
151+
:disabled="editingVersionIdentifierIndex >= 0 && editingVersionIdentifierIndex !== index">
152+
{{ editingVersionIdentifierIndex === index ? 'Editing...' : 'Edit' }}
153+
</button>
154+
<button
155+
class="button is-small is-danger"
156+
@click="removeVersionIdentifier(index)"
157+
:disabled="editingVersionIdentifierIndex >= 0">
158+
Remove
159+
</button>
160+
</div>
161+
</div>
162+
</div>
163+
</div>
164+
</div>
165+
166+
<!-- Reused form for both adding and editing -->
167+
<div class="field">
168+
<label class="label">Identifier Value Code</label>
169+
<div class="control">
170+
<input
171+
class="input"
172+
v-model="versionIdentifierData.identifierValue">
173+
</div>
174+
</div>
175+
176+
<div class="field">
177+
<label class="label">Identifier Type Name</label>
178+
<PropertyString
179+
:key="tempKey"
180+
ref="identifierNameInput"
181+
index="null"
182+
expandedProperty="identifierName"
183+
:langString="true"
184+
:range="['http://www.w3.org/2000/01/rdf-schema#langString']"
185+
:newProperty="true"
186+
:profile="profile"
187+
:addSingle="true"
188+
:options="null"
189+
:overrideUpdate="true"
190+
:propertyValue="versionIdentifierData.identifierName"
191+
:customProperty="true"
192+
@updatePropertyString="updateVersionIdentifierName" />
193+
</div>
194+
195+
<div class="field">
196+
<label class="label">Identifier Type</label>
197+
<div class="control">
198+
<input
199+
class="input"
200+
v-model="versionIdentifierData.identifierType">
201+
</div>
202+
</div>
203+
204+
<div class="field is-grouped">
205+
<div class="control">
206+
<button
207+
class="button is-primary"
208+
@click="editingVersionIdentifierIndex >= 0 ? saveVersionIdentifierEdit() : addVersionIdentifier()"
209+
:disabled="!canAddVersionIdentifier">
210+
{{ editingVersionIdentifierIndex >= 0 ? 'Save Changes' : 'Add Version Identifier' }}
211+
</button>
212+
</div>
213+
<div class="control"
214+
v-if="editingVersionIdentifierIndex >= 0">
215+
<button
216+
class="button"
217+
@click="cancelVersionIdentifierEdit()">
218+
Cancel Edit
219+
</button>
220+
</div>
221+
</div>
222+
</div>
223+
</div>
224+
</div>
225+
</div>
226+
120227
<!-- non text value input: create new, search, or url -->
121228
<div
122229
v-else-if="selectedPropertyToAdd !== '' && !selectedPropertyToAddIsTextValue"
@@ -312,7 +419,15 @@ export default {
312419
limitedTypes: [],
313420
limitedConcepts: [],
314421
createNewLevelNameModal: false,
315-
newLevelName: ''
422+
newLevelName: '',
423+
versionIdentifiers: [],
424+
versionIdentifierData: {
425+
identifierValue: '',
426+
identifierName: {},
427+
identifierType: ''
428+
},
429+
tempKey: 0,
430+
editingVersionIdentifierIndex: -1
316431
};
317432
},
318433
mounted: function() {
@@ -323,6 +438,11 @@ export default {
323438
}
324439
},
325440
computed: {
441+
canAddVersionIdentifier() {
442+
return this.versionIdentifierData.identifierValue &&
443+
this.versionIdentifierData.identifierName && this.versionIdentifierData.identifierName['@value'] &&
444+
this.versionIdentifierData.identifierType;
445+
},
326446
queryParams() {
327447
return this.$store.getters['editor/queryParams'];
328448
},
@@ -428,6 +548,9 @@ export default {
428548
if (range.toLowerCase().indexOf("level") !== -1 && this.profile[property]["add"] !== "checkedOptions") {
429549
return false;
430550
}
551+
if (range.toLowerCase().indexOf("https://purl.org/ctdl/terms/IdentifierValue") !== -1) {
552+
return false;
553+
}
431554
let urlProperties = [
432555
"https://purl.org/ctdlasn/terms/knowledgeEmbodied",
433556
"https://purl.org/ctdlasn/terms/skillEmbodied",
@@ -444,6 +567,10 @@ export default {
444567
return false;
445568
}
446569
return true;
570+
},
571+
selectedPropertyToAddIsVersionIdentifier: function() {
572+
let property = this.selectedPropertyToAdd["value"] ? this.selectedPropertyToAdd["value"] : "";
573+
return property === "https://purl.org/ctdl/terms/versionIdentifier";
447574
}
448575
},
449576
methods: {
@@ -501,6 +628,73 @@ export default {
501628
}
502629
}
503630
});
631+
},
632+
editVersionIdentifier(index) {
633+
this.editingVersionIdentifierIndex = index;
634+
const identifier = this.versionIdentifiers[index];
635+
636+
// Populate the form with existing data
637+
this.versionIdentifierData = {
638+
identifierValue: identifier.identifierValue,
639+
identifierName: {...identifier.identifierName},
640+
identifierType: identifier.identifierType
641+
};
642+
643+
// Force PropertyString component to re-render with new data
644+
this.tempKey++;
645+
},
646+
saveVersionIdentifierEdit() {
647+
if (this.canAddVersionIdentifier && this.editingVersionIdentifierIndex >= 0) {
648+
// Update the existing identifier
649+
this.versionIdentifiers[this.editingVersionIdentifierIndex] = {...this.versionIdentifierData};
650+
this.cancelVersionIdentifierEdit();
651+
}
652+
},
653+
cancelVersionIdentifierEdit() {
654+
this.editingVersionIdentifierIndex = -1;
655+
// Clear the form
656+
this.clearVersionIdentifierForm();
657+
},
658+
// Modify existing addVersionIdentifier to handle edit mode
659+
addVersionIdentifier() {
660+
if (this.canAddVersionIdentifier) {
661+
if (this.editingVersionIdentifierIndex >= 0) {
662+
// This is actually an edit save
663+
this.saveVersionIdentifierEdit();
664+
} else {
665+
// Original add logic
666+
this.versionIdentifiers.push({...this.versionIdentifierData});
667+
this.clearVersionIdentifierForm();
668+
}
669+
}
670+
this.emitVersionIdentifiers();
671+
},
672+
removeVersionIdentifier(index) {
673+
this.versionIdentifiers.splice(index, 1);
674+
this.emitVersionIdentifiers();
675+
},
676+
clearVersionIdentifierForm() {
677+
this.versionIdentifierData = {
678+
identifierValue: '',
679+
identifierName: {},
680+
identifierType: ''
681+
};
682+
683+
this.tempKey = Date.now();
684+
},
685+
updateVersionIdentifierName(value) {
686+
this.versionIdentifierData.identifierName = value;
687+
},
688+
emitVersionIdentifiers() {
689+
const versionId = this.versionIdentifiers.map((x) => {
690+
return {
691+
"https://purl.org/ctdl/terms/identifierValueCode": x.identifierValue,
692+
"https://purl.org/ctdl/terms/identifierTypeName": x.identifierName,
693+
"https://purl.org/ctdl/terms/identifierType": x.identifierType
694+
};
695+
});
696+
// Emit the value through the property-string-updated event
697+
this.updatePropertyString(versionId);
504698
}
505699
},
506700
watch: {

‎src/lode/components/Property.vue‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -82,6 +82,49 @@ TO DO MAYBE: Separate out property by editing or not.
8282
</div>
8383
</div>
8484
</template>
85+
<!-- identifier values -->
86+
<div v-else-if="isVersionIdentifier(item)">
87+
<div v-if="editingProperty"
88+
class="columns">
89+
<div class="column">
90+
<div class="field">
91+
<div class="control">
92+
<div>
93+
Identifier Value Code: {{ item['https://purl.org/ctdl/terms/identifierValueCode'][0]['@value'] }}
94+
</div>
95+
<div>
96+
Identifier Type Name: {{ item['https://purl.org/ctdl/terms/identifierTypeName'][0]['@value'] }}
97+
</div>
98+
<div>
99+
Identifier Type: {{ item['https://purl.org/ctdl/terms/identifierType'][0]['@value'] }}
100+
</div>
101+
</div>
102+
</div>
103+
</div>
104+
<div class="column is-narrow">
105+
<div
106+
class="field delete-property-button">
107+
<div class="control">
108+
<label><br></label>
109+
<div
110+
@click="showModal('remove', item)"
111+
class="button is-text has-text-danger">
112+
<i class="fa fa-times" />
113+
</div>
114+
</div>
115+
</div>
116+
</div>
117+
</div>
118+
<div v-else>
119+
<div class="expanded-view-property">
120+
<div :title="item['https://purl.org/ctdl/terms/identifierTypeName'][0]"
121+
class="property">
122+
<span class="tag is-size-7 is-light">Version Identifier</span>
123+
{{ item['https://purl.org/ctdl/terms/identifierTypeName'][0]['@value'] }}
124+
</div>
125+
</div>
126+
</div>
127+
</div>
85128
<!-- non text fields load a component-->
86129
<div
87130
v-else-if="!isText(item)"
@@ -1050,6 +1093,12 @@ export default {
10501093
if (type["@id"] != null && type["@id"] !== undefined) { return true; }
10511094
return false;
10521095
},
1096+
isVersionIdentifier: function(type) {
1097+
if (type && type['https://purl.org/ctdl/terms/identifierType']) {
1098+
return true;
1099+
}
1100+
return false;
1101+
},
10531102
isLink: function(type) {
10541103
if (EcObject.keys(type).length === 1) {
10551104
if (type["@id"] != null && type["@id"] !== undefined) {

‎src/lode/components/PropertyString.vue‎

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -250,7 +250,9 @@ export default {
250250
view: {
251251
type: String,
252252
default: ''
253-
}
253+
},
254+
overrideUpdate: Boolean, // Emit an event instead if true
255+
customProperty: Boolean
254256
},
255257
components: {
256258
ModalTemplate
@@ -260,7 +262,7 @@ export default {
260262
data: function() {
261263
var property;
262264
if (this.newProperty === true) {
263-
property = "";
265+
property = this.customProperty ? this.propertyValue : '';
264266
} else {
265267
property = this.expandedThing[this.expandedProperty];
266268
}
@@ -327,6 +329,9 @@ export default {
327329
this.text = {};
328330
}
329331
}
332+
if (this.customProperty && this.propertyValue) {
333+
this.text = this.propertyValue;
334+
}
330335
},
331336
computed: {
332337
ceasnUser: function() {
@@ -446,7 +451,11 @@ export default {
446451
},
447452
methods: {
448453
blur: function() {
449-
this.$parent.updatePropertyString(this.text, this.indexInternal);
454+
if (this.overrideUpdate) {
455+
this.$emit('updatePropertyString', this.text, this.indexInternal);
456+
} else {
457+
this.$parent.updatePropertyString(this.text, this.indexInternal);
458+
}
450459
this.isOpen = false;
451460
},
452461
onSearchChange: function() {

0 commit comments

Comments
 (0)